Question

以下是我的指令，它是一个实用程序（可重用）。

 var ChartNavigationDirective = { 'ChartNavigation': function (Items) {
return {
    restrict: 'EA',
    require: '?ngModel',
    replace: false,
    template: '<div class="chart-nav">' +
             ' </div>',
    scope: {
        options: '=ChartNavigation'
    },
    link: function (scope, element, attrs) {

        scope.parameters = {
            "prev_arrow": "#prev-arrow",
            "next_arrow": "#next-arrow"
        };

        Items.getItems(scope.options.Source, scope.options.Type).then(function (d) {

            scope.links = d.Items;
            for (var link in scope.links) {
                scope.links[link].Id = link;
            }
            var chartList = scope.links;
            setNavigation(chartList);
        });
        var setNavigation = function (chartList) {

            scope.totalCharts = chartList.length;
            if (scope.totalCharts <= 0) {
                $(scope.parameters.next_arrow).removeClass("on").addClass("off");
                $(scope.parameters.prev_arrow).removeClass("on").addClass("off");
            }
            if (scope.totalCharts > 0) {
                scope.currentItem = scope.links[0];                   
                scope.currentIndex = Number(scope.currentItem.Id) + 1;
                $(scope.parameters.prev_arrow).removeClass("off").addClass("on");
                $(scope.parameters.next_arrow).removeClass("off").addClass("on");
            }
            updateNavigation();
        };

        var updateNavigation = function () {

            if (scope.currentIndex <= 1) {
                $(scope.parameters.prev_arrow).removeClass("on").addClass("off");
            }
            else {
                $(scope.parameters.prev_arrow).removeClass("off").addClass("on");
            }
            if (scope.currentIndex >= scope.totalCharts) {
                $(scope.parameters.next_arrow).removeClass("on").addClass("off");
            }
            else {
                $(scope.parameters.next_arrow).removeClass("off").addClass("on");
            }
        };
        scope.Previous = function () {

            var currentIdx = scope.currentIndex;
            var previousIdx = currentIdx - 1;
            if (previousIdx >= 0) {
                scope.currentItem = scope.links[previousIdx - 1];                   
                scope.currentIndex = Number(scope.currentItem.Id) + 1;                   
            }
            updateNavigation();
        };

        scope.Next = function () {

            var currentIdx = scope.currentIndex;
            var nextIdx = currentIdx + 1;
            if (nextIdx <= scope.totalCharts) {
                scope.currentItem = scope.links[nextIdx - 1];
                scope.currentIndex = Number(scope.currentItem.Id) + 1; ;
               }
            updateNavigation();
        };
    }
    };
    }
   };

我想从我的控制器中查看scope.currentItem。我确实试过使用广播它工作正常。但我想用手表代替。这是我的控制器。

 var myController = function ($scope) {

$scope.templateUrl = '/_layouts/AngularControls/myController/Views/Charts.html';

$scope.currentConfig = '';

//    $rootScope.$on('curentConfig', function (event, args) {
//        $scope.currentConfig = args.data;
//    });

$scope.$watch("currentItem", function () {
    alert(JSON.stringify($scope.currentItem));
 });

 }

有谁可以指出我在做错的地方？如有任何建议请告诉我。

Answer 1

您正在尝试从控制器中查看指令范围变量。这不起作用，因为它们是两个不同的范围（您在指令中使用隔离范围）。

您可以从指令控制器中观察（但我不确定这是您想要的），或者只是将主控制器范围变量传递到指令中，并让指令操纵它而不是它自己的范围变量。我想使用scope.$parent.currentItem也是可能的，但由于指令的可重用性，绝对不推荐使用。

广播也很好，不知道为什么你不想这样做。

这是你的结构：

controller scope
-  directive scope
     currentItem

你在看这个：

controller scope
   watching for currentItem here, it does not exist
-  directive scope
     currentItem

Answer 2

我认为这是我的自我。在指令中使用$ rootScope控制器并观察$ rootScope变量已解决了这个问题。

在Direcive中：

$rootScope.currentItem= myItem;

在控制器中：

$scope.$watch("currentItem", function () {
    $scope.currentConfig = $rootScope.currentItem;
});

从控制器观察指令范围变量

2 个答案: