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

问题：即使指令未被加载/显示（因为vm.showBox为假），自定义指令的控制器代码也会运行，在这种情况下它会失败，因为{ {1}}未通过（在那里未定义）。

如果指令被隐藏，为什么指令的控制器代码仍会运行？我想假设如果使用该指令，它就会给出有效的参数，而不必检查是否定义了$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
            }
        });
    }
}

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

2 个答案: