0

angular中使用filter时,无论页面做什么操作(应该是触发digest),filter都会触发执行

<div ng-controller="myCtrl">
    <ul>
        <li ng-repeat="item in items | filter : ''" ng-bind="item"></li>
    </ul>
    <button type="button" class="btn btn-primary">按钮</button>
</div>
app.controller('myCtrl', [
    '$scope',
    function ($scope) {
        $scope.items = ['1', '2', '3'];
    }
]);

在angular源码filterFilter方法中打印:

function filterFilter() {
  return function(array, expression, comparator) {
    console.log(array);
    if (!isArray(array)) return array;

    // ...    
  };
}

执行效果如下:

开始时,执行两次filter,然后每次点击按钮就会执行一次filter。

请问怎么解决这个问题?

1 个回答

0

你已经知道答案了啊,就是因为$filter写在了模板中,因此每次$digest都会重现编译模板,解析表达式,执行表达式...巴拉巴拉...$digest几次就运行几次,这是正常的情况。

解决方法就是尽量不要把$filter写到模板中,而利用$filter服务注入到controller中按需执行,或者干脆不要使用$filter也是可以的,可以将过滤的逻辑抽象到获取数据的服务中。