自定義指令隱藏，但代碼仍然運行

Question

我有使用NG隱藏有時隱藏的自定義指令：

<my-custom-directive ng-show="vm.showBox" 
    value="vm.objects" 
></my-custom-directive>   

從我的自定義指令代碼的片段：

function myCustomDirective() { 
    var directive = { 
     controller: controller, 
     controllerAs: 'vm', 
     ///... 
     scope: { 
      value: '=' 
     } 
    }; 
    return directive; 

    function controller($scope) { 
     var vm = this; 
     ///... 
     $scope.value.dates = $scope.value.dates || [];  
    } 
} 

的問題：即使當指令不應該被加載/顯示（因爲vm.showBox爲false）時，自定義指令的控制器代碼將運行，在這種情況下，它將失敗，因爲$scope.value未被傳遞（在那裏未定義）。

爲什麼指令的控制器代碼無論如何都運行，如果指令是隱藏的？我想假設，如果使用指令，它將被賦予有效的參數，而不必檢查是否定義了$scope.value。

Answer 1

ng-show控制元素的可見性（更改css屬性display），但元素仍然存在於DOM中。刪除/創建元素，您可以使用ng-if而不是ng-show

Answer 2

ng-show只控制元素的顯示屬性。它不會阻止元素在DOM中呈現。爲了防止它，你可以使用ng-if。

但ng-if的問題是，根據條件，每一個它都會銷燬範圍並創建新範圍。

爲防止出現此問題，您應該使用ng-show。

在你的情況下，你可以在你的指令中使用watch expressin。

<my-custom-directive ng-show="vm.showBox" 
    value="vm.objects" 
></my-custom-directive> 

function myCustomDirective() { 
    var directive = { 
     controller: controller, 
     controllerAs: 'vm', 
     ///... 
     scope: { 
      value: '=' 
     } 
    }; 
    return directive; 

    function controller($scope) { 
     var vm = this; 
     ///... 

     var watchExpression = $scope.$watch('value', function(newValue, oldValue){ 
      if(newValue) 
      { 
       $scope.value.dates = $scope.value.dates || []; 
       watchExpression(); //de-register watch expression 
      } 
     }); 
    } 
}