一元多的指令可以共享一个孤立的范围是什么？ [英] Can multiple directives for one element share an isolated scope?
问题描述
在相同的元素有两个指令不能同时具有隔离范围，但它们都可以使用他们的父母分离出相同的范围？并能它们都使用绑定到孤立的作用域属性？
Two directives on the same element can not both have isolated scope, but can they both use the same scope isolated from their parent? And can they both use properties bound to the isolated scope?
例如，如果我有一个元素上的两个指令
For example, if I have two directives on an element
<eDirective aDirective prop="parentProp"/>
还有一指令定义具有绑定属性的隔离范围
And one directive defines an isolated scope with a bound property
App.directive('eDirective', function() {
return {
restrict: 'E',
scope: {
localProp: '=prop'
},
...
};
});
请问其他指令得到范围，它可以使用绑定属性？
Does the other directive get that scope and can it use the bound property?
App.directive('aDirective', function() {
return {
restrict: 'A',
link: function postLink(scope, element, attrs) {
scope.$watch('localProp', function(newProp, oldProp) {
...
}
},
...
};
});
我最初的尝试（pretty多$ C $如上CD）失败。
My initial attempt (pretty much coded as above) failed.
推荐答案
我建议你使用通过二级指令的要求财产指令控制器之间的通信。第一指令（电子指令）保持分离的范围内，而第二辅助指令（α-指令）具有到第一指令的基准，并设置通过在第一指令定义的功能特性。一个小样本将是（见plunker ）：
I suggest you make use of communicating between the directives' controllers via the require property of the secondary directive. The first directive (e-directive) holds the isolated scope, while the second helper directive (a-directive) has a reference to the first directive and sets properties via functions defined on the first directive. A small sample would be (see plunker):
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div e-directive config="parentConfig" a-directive></div>
</body>
</html>
和JavaScript的：
and the javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.parentConfig = {};
});
app.controller('ECtrl', function ( $scope ) {
this.setProp = function(newProp){$scope.config.prop = newProp;};
$scope.$watch('config', function(newProp, oldProp) {
console.log(oldProp, newProp);
});
});
app.directive('eDirective', function() {
return {
restrict: 'A',
scope: {
config: '='
},
controller: 'ECtrl',
link: function(scope, element, attrs) {
scope.config.prop ="abc";
}
};
});
app.directive('aDirective', function() {
return {
restrict: 'A',
require: 'eDirective',
link: function(scope, element, attrs,ctrl) {
ctrl.setProp("def");
}
};
});
这篇关于一元多的指令可以共享一个孤立的范围是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
