自定义指令隐藏但代码仍在运行答案

【问题标题】：Custom directive hidden but code still runs自定义指令隐藏但代码仍在运行
【发布时间】：2015-01-10 23:55:16
【问题描述】：

我有一个自定义指令，有时会使用 ng-hide 隐藏：

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

我的自定义指令代码中的一个 sn-p：

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 为假），自定义指令的控制器代码也会运行，在这种情况下它会失败，因为$scope.value 没有通过（它是那里未定义）。

如果指令被隐藏，为什么指令的控制器代码仍然运行？我想假设如果使用该指令，它会被赋予有效的参数，而无需检查是否定义了$scope.value。

【问题讨论】：

标签： angularjs angularjs-scope angular-directive

【解决方案1】：

ng-show 控制元素的可见性（更改 css 属性 display）但元素仍然存在于 DOM 中。要删除/创建元素，您可以使用 ng-if 而不是 ng-show

【讨论】：

【解决方案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
            }
        });
    }
}

【讨论】：