angular filter 重复执行

Question

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。

请问怎么解决这个问题？

Answer 1

你已经知道答案了啊，就是因为filter写在了模板中，因此每次digest都会重现编译模板，解析表达式，执行表达式...巴拉巴拉...$digest几次就运行几次，这是正常的情况。解决方法就是尽量不要把filter写到模板中，而利用filter服务注入到controller中按需执行，或者干脆不要使用$filter也是可以的，可以将过滤的逻辑抽象到获取数据的服务中。