AngularJS：$ watch在ngTable的控制器中不起作用

Question

我為表格過濾器寫了popup指令：

    var ngClass = "{ 'active': itemActive == item }";

    return {
        template: '<span class="header_select_filter">' +
        '<a class="icon icon-filter"></a>' +
        '<div class="large select_popup">' +
        '<h3></h3>' +
        '<div class="content box">' +
        '<ul class="items">' +
        '<li ng-repeat="item in items" ng-class="' + ngClass + '" ng-click="select(item)"><span ng-bind="item.Name"><span></li>' +
        '</ul>' +
        '</div>' +
        '</div>' +
        '</span>',
        replace: true,
        transclude: true,
        scope: {
            items: '=',
            itemActive: '='
        },
        restrict: 'E',
        controller: function ($scope) {
            $scope.select = function (item) {
                $scope.itemActive = item;
            }
        },
        link: function ($scope, $element) {
            var $popup = $element.find('.select_popup');
            $popup.css('top', '50px');
            $popup.find('.content.box').css('padding', '0');

            $element.find('a.icon.icon-filter:first')[0].onclick = function () {
                $popup.toggle();
            };

            $element.find('ul.items')[0].onclick = function () {
                $popup.fadeToggle('slow');
            }

        }
    };


});

這是我如何調用它：

<select-popup items="filterItems" item-active="type"></select-popup>

這是angularjs控制器的代碼，我嘗試運行$ watch：

 Invoice.types(function (data) {
            var items = $scope.filterItems = data;

            $scope.type = items[0];
        });

        $scope.$watch('type', function () {

            console.log("type changes");
        });

但是$ watch（'type'）不起作用，盡管itemActive的值是通過單擊彈出元素來更新的。

控制器中的發票是一項基於$ resourse的服務，即Invoice.types是ajax請求。 當我使用$ http時，問題仍然存在。 你能幫助我嗎？

編輯：如果我不使用ajax：

 var items = $scope.filterItems = [
         new FilterItem(1, 'Positive'),
         new FilterItem(2, 'Negative'),
         new FilterItem(3, 'Neutral')
    ];

    $scope.type = items[0];

    var i = 1;
    $scope.$watch('type', function () {
        console.log('type changes:' + i);
        i++;
    });

然后就可以了。

帶有AJAX的JSFiddle也可以工作。 奇怪為什么$ watch對我不起作用。

更新：我發現了問題。 我正在使用ngTable ，並將指令放在表的列中：

<table ng-table="tableItems">
    <thead>
        <tr>
          <td class="center text-center" rowspan="2">
             <span class="header-name">Name</span>
             <select-popup items="filterItems" item-active="type"></select-popup>       </td>
          <td class="center text-center" rowspan="2">Age</td>
          <td class="center text-center" rowspan="2">Gender</td>
        </tr>
   </thead>

Answer 1

您需要在每個onclick中運行$ apply

$element.find('a.icon.icon-filter:first')[0].onclick = function () {
    $popup.toggle();
    scope.$apply();
};

$element.find('ul.items')[0].onclick = function () {
    $popup.fadeToggle('slow');
    scope.$apply();
}

另外，我強烈建議您閱讀有關如何使用角度的內容，因為您一開始不應該使用onclick函數。

在您的ajax中添加一個$ apply。

Invoice.types(function (data) {
        var items = $scope.filterItems = data;

        $scope.type = items[0];
        $scope.$apply();
    });