相同条件下的多个 ng-if - 性能明智

Question

我有一个包含不同元素的 html 页面，根据某些条件（相同条件）将 shown/hidden 使用 Angular 的 ng-if。

在我的控制器中，我创建了一个 boolean 变量。

$scope.myCondition = getValue();

在我看来，我使用 ng-if 指令来监听这个变量。

什么会更好性能明智：

在这种情况下使用多个 ng-if 编写更简洁的代码 BUT：

<div>  
 <div ng-if="myCondition" >-- a --</div>
 <div ng-if="!myCondition">-- A --</div> 
 <div>
  -- text, text, text... --
 </div>
 <div ng-if="myCondition" >-- b --</div>
 <div ng-if="!myCondition">-- B --</div> 
 <div>
  -- text, text, text... --
 </div>
 <div ng-if="myCondition" >-- c --</div>
 <div ng-if="!myCondition">-- C --</div> 
 <div>
  -- text, text, text... --
 </div>
</div>

写代码重复（在视图中）但是使用单个ng-if:

 <div ng-if="myCondition">  
     <div>-- a --</div>
     <div>
      -- text, text, text... --
     </div>
     <div>-- b --</div>
     <div>
      -- text, text, text... --
     </div>
     <div  >-- c --</div>
     <div>
      -- text, text, text... --
     </div>
    </div>
    <div ng-if="!myCondition">  
     <div>-- A --</div>
     <div>
      -- text, text, text... --
     </div>
     <div>-- B --</div>
     <div>
      -- text, text, text... --
     </div>
     <div  >-- C --</div>
     <div>
      -- text, text, text... --
     </div>
    </div>

我更喜欢编写示例 1 中显示的代码，因为它更易于维护。但我担心这样会为每个 ng-if 创建一个新的 $watch。
那是对的吗？ Angular 为每个 ng-if 创建新的 $watch，尽管这是相同的静态条件（不是某些函数的 return 值，而是一个简单的变量）。

这个问题是关于 ng-if 指令的，但也与 ng-show 和 ng-hide

相关

Answer 1

你是对的，你会为每个使用的 ng-if 创建一个观察者，所以在性能方面使用第二个选项更好。

但是，如果您的条件只被评估一次（当控制器执行其代码时），您可以使用 一次性绑定运算符 :: 和 ng-如果要避免 $watchers.

Answer 2

这是通过使用 ng-switch 获得与您的第一种方法相似的相同预期结果的另一种方法。demo 这是它的工作原理。

下面是你的 HTML 使用 ng-switch

<body ng-app="switchExample">
  <div ng-controller="ExampleController">
  <input type="text" ng-model ="searchTerm" ng-change="getDisplayText()"/> 
  <code>selection={{searchTerm}}</code>
  <hr/>
  <div class="animate-switch-container"
    ng-switch on="myCondition">
      <div  ng-switch-when="Home">Home page</div>
      <div  ng-switch-when="show test">Test Sample</div>
      <div  ng-switch-default>default</div>
  </div>
</div>
</body>

在您的 JS 中，您将拥有

(function(angular) {
    'use strict';
    angular.module('switchExample', ['ngAnimate'])
        .controller('ExampleController', ['$scope', function($scope) {

            $scope.getDisplayText = function() {
                $scope.myCondition = getValue($scope.searchTerm);
            };
            $scope.myCondition = getValue('Home');

            function getValue(input) {
                var cond = input;
                if (input === 'Test') {
                    cond = 'show test';
                }
                return cond;
            };
        }]);
})(window.angular);

与 ng-if 不同，使用 ng-switch 您不必担心多个条件并且维护更清晰的代码很容易。

相同条件下的多个 ng-if - 性能明智

Multiple ng-if on the same condition - performance wise

javascript

angularjs

angularjs-ng-show

angularjs-ng-if