同一元素上的两个指令不能同时具有隔离范围,但是它们都可以使用与其父代隔离的相同范围.他们都可以使用绑定到隔离范围的属性吗？
例如,如果我有一个元素的两个指令
<eDirective aDirective prop="parentProp"/>
一个指令定义了一个带有绑定属性的隔离范围
App.directive('eDirective',function() {
return {
restrict: 'E',scope: {
localProp: '=prop'
},...
};
});
其他指令是否获得该范围,并且可以使用绑定属性？
App.directive('aDirective',function() {
return {
restrict: 'A',link: function postLink(scope,element,attrs) {
scope.$watch('localProp',function(newProp,oldProp) {
...
}
},...
};
});
我的初始尝试(几乎编码如上)失败了.
我建议您通过辅助指令的require属性来使用指令控制器之间的通信.第一个指令(e-directive)保存隔离的作用域,而第二个helper指令(a-directive)具有对第一个伪指令的引用,并通过第一个伪指令定义的函数来设置属性.一个小样本将是(
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：
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',oldProp) {
console.log(oldProp,newProp);
});
});
app.directive('eDirective',scope: {
config: '='
},controller: 'ECtrl',link: function(scope,attrs) {
scope.config.prop ="abc";
}
};
});
app.directive('aDirective',require: 'eDirective',attrs,ctrl) {
ctrl.setProp("def");
}
};
});
