Несколько нг-если при одном условии - производительность

У меня есть HTML-страница с другим элементом, который в соответствии с некоторым условием (то же условие) будет отображаться / скрываться с помощью Angular ng-if.

В моем контроллере я создаю boolean переменная.

$scope.myCondition = getValue();

На мой взгляд, я слушаю эту переменную, используя ng-if директивы.

Что будет лучше по производительности?

  1. Напишите более чистый код НО с несколькими ng-if при этом условии: 

<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>

  1. Дублирование кода (в представлении), но использование одного 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, так как он более удобен в обслуживании. Но я обеспокоен тем, что таким образом новый $watch будет создан для каждого ng-if,
Это верно? Angular создает новые $watch для каждого ng-if, хотя это то же самое статическое условие (не возвращаемое значение некоторой функции, а простая переменная).

Этот вопрос задан относительно ng-if директива, но также имеет отношение к ng-show а также ng-hide

Источник

2 ответа

Решение

Вы правы, вы создадите наблюдателя для каждого используемого ng-if, поэтому с точки зрения производительности лучше использовать второй вариант.

Однако, если ваше условие будет оцениваться только один раз (когда контроллер выполняет свой код), вы можете использовать оператор одноразового связывания:: с ng-if, чтобы избежать $watchers.

Источник

Вот еще один подход к достижению того же желаемого результата, аналогичный вашему 1-му подходу с помощью ng-switchВот пример того, как это работает.

Ниже ваш 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-switch, вам не нужно беспокоиться о множественных условиях и поддерживать более чистый код легко, в отличие от ng-if.

Источник
Другие вопросы по тегам