javascript - tabset 中的 AngularJS $scope 问题

Question

我在尝试在我的 Controller 中查看由 View 中的过滤器生成的集合时遇到问题。

我将过滤后的数据存储在一个变量中:

 <table class="table">
     <tr ng-repeat="item in filteredCollection = (myCollection | filter: txtSearch)">
         <td ng-bind="item"></td>
     </tr>
 </table>

我想在我的 Controller 中订阅“filteredCollection”的更改:

$scope.$watchCollection('filteredCollection', function() {
    if (typeof($scope.filteredCollection) != 'undefined')
        console.log('Results changed : ' + $scope.filteredCollection.length);
});

我已经设置了this JSFiddle向您展示我的问题:我的 watch 功能从未被调用。

有趣的是，当我删除所有 <tabset> <tab> 时它会起作用我的 HTML 中的标签。我想我搞砸了 $scope，但我不明白为什么。也许 tabset 会创建一个新的 $scope child 或其他东西。

我希望你们能弄清楚这里发生了什么，

干杯

Answer 1

尝试将 filteredCollection 放入一个对象中，这样它就会更改正确的范围属性:

$scope.obj = { filteredCollection : [] };
$scope.$watchCollection('obj.filteredCollection', function(newVal) {
    if (typeof($scope.obj.filteredCollection) != 'undefined')
        console.log('Results changed : ' + $scope.obj.filteredCollection.length);
});

在 HTML 中:

<tr ng-repeat="item in obj.filteredCollection = (myCollection | filter: txtSearch)">

查看此 fiddle .