從控制器監視指令范圍變量

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