在angularJS

时间:2015-07-08 03:15:58

标签: angularjs angular-filters

过滤模板

在视图模板中使用过滤器会重新评估每个摘要上的过滤器来自angular文档。

即使表达式的值没有改变,它仍然会重新评估(或者说过滤器的输入没有改变)。我知道每个表达式的一些观察者将被设置。在摘要循环期间,它将检查表达式值的任何变化,如果是,它将触发观察者。并且表达式将被重新评估。但是,即使输入没有改变,为什么过滤器会在每个摘要上重新评估。

过滤函数应该是纯函数,这意味着它应该是无状态和幂等的。 Angular依赖于这些属性,仅在函数输入发生变化时才执行过滤。 来自angular doc。

早些时候它说它会在输入改变的时候用第二个粗体文本重新评估每个摘要。两者之间的差异是什么。 https://docs.angularjs.org/guide/filter

更新

我制作了reveraFilter

app.js文件

angular.module('todoApp')
    .filter('reversa', function() {
        return function(input, condition) {
            input = input || '';
            var out = '';
            for (var i = 0; i < input.length; i++) {
                out = input.charAt(i) + out;
            }
            return out;
        };
    })
    .controller('MainCtrl', function($scope, reversaFilter) {


        $scope.todo = '';
        $scope.text = 'shriyansh';
        //  $scope.text = reversaFilter($scope.text);


    });

部分HTML

<div class="container">
    <h2>My todos</h2>
    <input type="text" ng-model="todo">
    <div>{{text|reversa}}</div>
</div>

我把断点放在过滤器的返回功能里面。 当我改变todo变量的值时,它也是执行过滤器代码。但是我把过滤器放到文本上而不是todo。

1 个答案:

答案 0 :(得分:1)

Angular $digest()循环是一种特殊机制,Angular可以使用它来提供双向绑定功能,这是其签名功能之一。

基本上,angular为表达式或过滤器中使用的每个变量创建$watch()。每当观察到的项目发生变化时,$digest()循环将触发,并评估范围内的所有属性。在$digest期间,重新评估表达式,重新计算过滤器,并更新DOM以反映任何更改。

如果一个变量中的更改触发另一个变量要更改(例如:{{a + b = c}}会导致c更改ab,更改为第二个变量会触发新的$digest,以评估这些更改是否会影响任何其他变量,依此类推。一旦所观察的变量没有进一步变化,$digest循环只是“稳定”。

过滤器也必须在此$digest循环中重新评估,因为其中一个更改可能是过滤器的排序方式,过滤器中使用的参数,甚至是要过滤的实际列表。如果$digest循环没有处理这些可能性,那么过滤器将无法以流畅的方式对双向绑定作出反应。

过滤功能幂等变得非常重要。如果过滤器有副作用,这些副作用可能会使$digest进入无限循环。 $digest周期可能会陷入一个位置,在这个位置,每次更改都会导致另一次更改,从而导致另一次更改。

$digest循环有一个突破点,如果遇到这个潜在的无限循环,将抛出错误10 iterations reached并停止继续处理。此外,为了进一步避免出现问题,过滤器 功能本身 仅在输入发生变化时执行。因此,当过滤器被评估时,除非有必要,否则每个周期都不会执行