Question

我是AngularJS的新手。我已经构建了一个在名为“todos”的数组上使用Isolate Scope（=）的指令。然后我过滤todos数组，并将其命名为filteredArray。我的“todos”元素使用双向绑定进行更新，但我不知道必须采取什么措施才能将todos的更新绑定到filteredArray。

我为我在这里的实验设置了一个小提琴：http://jsfiddle.net/apkk3rjc/你甚至可以看到我试图在我的JS第50行设置一个简单的$ watch（）但它似乎没有触发超出第一次加载。

要明确：我不需要双向绑定回我的控制器，但是当 todos 更改时，我确实需要 filteredTodos 自动更新制成。

这是我的指示：

todoApp.directive('todoList', ['filterFilter', function(filterFilter) {
return {
    restrict: 'E',
    templateUrl: 'todo-list.html',
    scope: {
        todos: '='
    },
    link: function (scope, element, attrs) {
        // scope.todos is bound
        // scope.filteredTodos is not!
        scope.filteredTodos = filterFilter(scope.todos, { completed: false });
    }
};
}]);

Answer 1

我找到了自己问题的答案。需要做两件事：

首先，scope.filteredTodos不会自动绑定，因此每当修改scope.todos时都必须重新计算。所以我们在数组中添加一个$ watch。

我原来的$ watch看起来像这样并且错了：

// Watch the entire array. DOESN'T FIRE ON NEW ITEMS
scope.$watch('todos', function () { ... });

这不起作用，因为观看整个阵列并不跟踪更改。最后，我只是看了阵列的长度。

// Watch the array length. Works when new items are added! :)
scope.$watch('todos.length', function () { ... });

或者，您可以设置第三个参数＆＃39; deep＆＃39;为true，但这带来了很多开销，特别是如果你的数组非常大。但是，如果您想要观察阵列中的每个项目以进行更改，这将是唯一的方法。

// Watch the entire array with deep analysis. Costly, but works.
scope.$watch('todos', function () { ... }, true);

因为我只是在寻找阵列中的新元素，所以我一直在观看＆＃39; todos.length＆＃39;。

如何更新AngularJS指令中的过滤数组？

1 个答案: