Angularjs：$watch在带有ngTable的控制器中不起作用

Question

我为表的过滤器写了一个弹出指令:

    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的值是通过点击元素的弹出更新。

controller中的

Invoice是一个基于$ resource的服务，即Invoice。类型是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++;
    });

JSFiddle with AJAX也可以工作。很奇怪为什么$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();
}

同时，我强烈建议你阅读一下如何使用angular，因为你不应该一开始就使用onclick函数。

在ajax中添加一个$apply。

Invoice.types(function (data) {
        var items = $scope.filterItems = data;
        $scope.type = items[0];
        $scope.$apply();
    });