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也是可以的，可以将过滤的逻辑抽象到获取数据的服务中。