我在角度指令之外正确共享了状态？ (父范围/ $rootScope问题)
作者：互联网
我页面上有两个没有以某种方式嵌套的元素.在第一个属性上,我要设置第二个属性的内容,如下所示：
<body>
<input info="This is some info"></input>
<div>{{info}}</div>
</body>
我知道可以按照“ AngularJS – Attribute directive input value change”中所述进行类似的操作,但是在我的情况下,属性的内容是modelvalue.而且,我已经在使用ng-model来处理输入的值.
最后,我像这样解决了这个问题：
<body>
<input infobox info="This is some info"></input>
<div>{{info}}</div>
</body>
app.directive('infobox', function() {
return {
restrict : 'A',
scope : {
info : '@info'
},
controller: function($rootScope, $scope) {
$rootScope.info = $scope.info;
}
};
});
因此,我通过直接转到$rootScope来绕过任何孤立的范围来传递值,但感觉像是在解决问题.从本质上讲,我不知道哪个控制器或作用域可能在链上,因为我需要能够在任何地方使用此组件.
另一种解决方案是为整个页面设置一个父控制器,但这又仅仅是伪根作用域.另一个更麻烦的解决方案是拥有两个指令或控制器,并使用类似于总线的事件进行通信.可以,但是我们不要这样做.
有没有一种“干净”的方法来做到这一点？
/编辑
这是一个应该有效的干净解决方案(在jsfiddle中它可以做到)：
<body>
<div info="this is some info"></div>
<div>{{info}}</div>
</body>
app.directive('info', function() {
return {
restrict : 'A',
link: function(scope, element, attrs, ngModel) {
scope.info = attrs.info;
}
};
});
然而,在我的现实生活中,价值固守在链中的某处.具有隔离范围的父指令是否有可能一直阻塞级联？
/ edit2
我认为这肯定是可行的解决方案.它涉及三个指令,其中一个是彼此的父母.注释中建议的解决方案的组合：
但是,在我自己的代码中,它仍然不起作用.看起来似乎很简单,但infoManager.info仍未定义.
解决方法:
我最近在类似情况下使用了另一种方法(也确实使用“ rootscope越狱”和“事件发出/侦听”模式来解决其他问题)可能对您有用：可以说我们有此指令：
app.directive('infobox', function() {
return {
restrict : 'A',
scope : {
info : '@info'
},
controller: function($rootScope, $scope) {
//$rootScope.info = $scope.info;
this.setInfo = function(data){
$scope.info = data;
}
this.getInfo = function(){
return $scope.info;
}
}
};
})
现在,我可以添加另一个指令来显示{{info}}：
与html：
app.directive('showinfo', function(){
return {
restrict:'A',
template:'<div>{{info}}</div>',
require:'^infobox', //this is where the magic happens
link:function(scope,element,attrs,parentCtrl){ //notice that now er have a "parentctrl, with everything that is on 'this' in the required direcive
//you can set a watch for this etc..
scope.info = parentCtrl.getInfo();
}
}
})
希望这可以帮助！
标签：angularjs-controller,angularjs,angularjs-directive,angularjs-scope,javascript 来源： https://codeday.me/bug/20191030/1964708.html