AngularJS 标签集中的 $scope 问题

Question

我在尝试在我的控制器中查看由视图中的过滤器生成的集合时遇到问题。

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

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

我想在我的控制器中订阅 'filteredCollection ' 的更改：

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

我已设置 this JSFiddle 向您展示我的问题：我的手表功能从未被调用。

有趣的是，当我删除 HTML 中的所有 <tabset> <tab> 标签时，它会起作用。我想我搞砸了 $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。

Answer 2

您认为 tabset 和 tab 创建新范围的想法是正确的。因此，您正在丢失 filteredCollection 的上下文，因为它现在是在 tab 指令范围的上下文中创建的。

Angular 最近添加了 controllerAs 有助于避免这种情况的语法。它使我们能够更好地确定正在执行的范围。

我已经用 controllerAs 语法更新了您的 jsFiddle，以展示这有何帮助。手表现在按预期启动。

http://jsfiddle.net/hezwyjx1/2/

这里有一些关于控制器语法的帮助资源：

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

Answer 3

这是另一个 post 的解决方案： https://github.com/angular-ui/bootstrap/issues/1553

AngularJS 标签集中的 $scope 问题

AngularJS $scope issues in tabset

javascript

angularjs

angular-ui

angularjs-scope

angular-ui-tabset