Question

是否可以在指令隔离范围内从rootScope访问单个变量？

我理解使用scope: false将继承父作用域中的所有属性，scope: true将通过继承父作用域中的所有属性来创建新作用域。

我们是否可以从父作用域继承一个属性，以便指令可以更模块化和更清晰。

以下是我指的情况。

的index.html

<body ng-app="app">
    <header></header>
    <div ui-view=""></div>
</body>

directive.html

<div>Parent prop is {{parentProp}}</div>

directive.js

app.directive('header', function ($rootScope) {
        return {
            templateUrl: "temp.html"
            restrict: 'E',
            scope: {
                parentProp: "@"
            },
            controller: function () {
                ...
            },
            bindToController: true,
            controllerAs: 'header'
        };
    });

app.js

app.run(function ($rootScope) {
        $rootScope.$on('$stateChangeStart', function (event, next, nextParams) {
            $rootScope.parentProp = false;
            if(checkIfParentPropShouldBeTrue()) {
                $rootScope.parentProp = true;
            }
        });
    });

parentProp属性随状态而变化。我是否可以将rootScope的此属性绑定到指令的隔离范围，并在每次状态更改时分别操作指令的DOM？

Answer 1

在指令上定义隔离范围时，它会从指令元素的属性中获取值。在这种情况下，您所要做的就是将“parentProp”传递给指令，例如<header parentProp="{{parentProp}}"></header>

这很好，因为它使您的代码更像您想要的模块化。您不必假设该值附加到作用域，但可以从作用域或控制器传递任何内容。

在OP发表评论后，没有属性

尝试将$ rootScope注入指令的控制器，然后设置监视。我不确定这是否适用于隔离范围

app.directive('header', function ($rootScope) {
    return {
        templateUrl: "temp.html"
        restrict: 'E',
        scope: {
            parentProp: "@"
        },
        controller: function ($rootScope, $scope) {
            var unbindWatch = $rootScope.$watch('parentProp', function(value){
                $scope.parentProp = value;
            });
            //clean up watch when controller destroyed
            $scope.$on('$destroy', function(){
                unbindWatch();
            });
        },
        bindToController: true,
        controllerAs: 'header'
    };
});

在父范围

1 个答案:

在OP发表评论后，没有属性