javascript - 从 Controller 观察指令范围变量

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();
        };
    }
    };
    }
   };

我想从我的 Controller 观看scope.currentItem。我确实尝试过使用广播，效果很好。但我想用 watch 代替。这是我的 Controller 。

 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

您正在尝试从 Controller 观察指令范围变量。这是行不通的，因为它们是两个不同的作用域(您在指令中使用隔离作用域)。

您可以从指令 Controller 观看(但我不确定这就是您想要的)，或者简单地将主 Controller 作用域变量传递到指令中，并让指令操纵它而不是它自己的作用域变量。我想使用 scope.$parent.currentItem 也是可能的，但绝对不推荐，因为指令可重用性。

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

这是你的结构:

controller scope
-  directive scope
     currentItem

你正在关注这个:

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