多ng - 如果在相同的條件下 - 性能明智

我有一個不同的元素的HTML頁面，根據一些條件（相同的條件）將顯示/隱藏使用Angular的ng-if。多ng - 如果在相同的條件下 - 性能明智

在我的控制器中，我創建了一個boolean變量。

$scope.myCondition = getValue();

在我看來，我聽這個變量使用ng-if指令。

會有什麼更好的性能明智：

編寫更乾淨的代碼但多ng-if在此條件下：

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

寫代碼重複（在視圖中）BUT使用單ng-if：

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

我更喜歡寫代碼作爲顯示在例如1號，因爲它是更易於維護。但我擔心這種方式會爲每個ng-if創建一個新的$watch。
這是正確的嗎？是否爲每個ng-if創建新的$watch，儘管這是相同的靜態條件（不是某個函數的返回值，而是一個簡單變量）。

這個問題問關於ng-if指令，但相關也ng-show和ng-hide

來源

2016-09-20 Gil Epshtain

每個人都會擁有自己的手錶，所以從性能的角度來看，你是正確的，2nd會更好。 – charlietfl

你說得對，您將創建一個觀察者每使用NG-IF，所以在性能方面是更好地使用第二選項。但是，如果您的條件將僅被評估一次（當控制器執行其代碼時），您可以使用單次綁定運算符::與ng-if避免$ watchers。

來源

2016-09-20 14:58:44

下面是使用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。

來源

2016-09-20 19:01:49

多ng - 如果在相同的條件下 - 性能明智

回答

相關問題