Question

我有一个ng-repeat，就像一个switch条件，告诉我要渲染哪个模板。我在ng-repeat中使用ng-if来实现这一点。问题？它仍在评估ng-if中的模板，即使条件评估为false也会导致整个事情变慢。

<div ng-repeat="i in ...">
  <div ng-if="i == 'something1'">
    if this is false, do not evaluate this entire stuff
    .... some complex template goes here
  </div>
  <div ng-if="i == 'something2'">
    if this is false, do not evaluate this entire stuff
    .... another complex template goes here
  </div>
</div>

如果每个ng-if中的模板很复杂，并且有20 ng-if在ng-repeat内，只有一个ng-if评估为true，则其他19个模板将浪费计算资源。

如果不采用编程方法并为呈现的模板维护双向绑定，我可以做些什么来缓解这种情况？

Answer 1

ng-if如果条件为false则从HTML中删除项目，因此一些渲染＆amp;在此之前可能会进行评估。如果将ng-include嵌套在ng-if中，则不会评估通过ng-include加载的模板。

这样的事情：

<body ng-app="app">
    <div ng-controller="myController as ctrl">
        <div ng-if=true>
            Hi
            <div>{{ctrl.log(true)}}</div>
        </div>
        <div ng-if=false>
            Bye
            <ng-include src="foo.html"></ng-include>
            <div>{{ctrl.log(false)}}</div>
        </div>

    </div>
    <script>
        angular.module('app', []).controller("myController",myController);

        function  myController($scope){
            var ctrl = this;

            ctrl.log=function(val) {    
                console.log(val);
                return val;
            }
        };
    </script>
</body>

有没有办法阻止在ng-if内部评估模板，如果其条件评估为false？

1 个答案: