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

Question

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

<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 || [];      
    }
}

问题：即使指令不应该是 loaded/displayed（因为 vm.showBox 是假的），自定义指令的控制器代码也会运行，在这种情况下它会失败，因为 $scope.value 未通过（那里未定义）。

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

Answer 1

ng-show 控制元素的可见性（css 属性 display 的变化）但元素仍然存在于 DOM 中。对于 remove/create 元素，您可以使用 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
            }
        });
    }
}

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

Custom directive hidden but code still runs

angularjs

angularjs-scope

angular-directive