gpt4 book ai didi

javascript - 从父作用域继承隔离作用域中的变量

转载 作者:行者123 更新时间:2023-12-03 08:19:53 27 4
gpt4 key购买 nike

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

我了解使用 scope: false 将从父范围继承所有属性,而 scope: true 将通过从父范围继承所有属性来创建新范围。

我们能否从父作用域仅继承一个属性,以便指令更加模块化和简洁。

这是我提到的案例。

index.html

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

指令.html

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

指令.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 的此属性分别绑定(bind)到指令的隔离范围和操作指令的 DOM 吗?

最佳答案

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

这很好,因为它使您的代码更加模块化,就像您想要的那样。您不必假设该值已附加到作用域,但可以传入作用域或 Controller 中的任何内容。

OP 评论后关于不使用属性的操作

尝试将 $rootScope 注入(inject)到指令的 Controller 中,然后设置监视。我不确定这是否适用于隔离范围

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'
};
});

关于javascript - 从父作用域继承隔离作用域中的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33788334/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com