Rob*_*cci 15 angularjs angularjs-directive
同一元素上的两个指令不能同时具有隔离范围,但它们是否都可以使用与其父元素隔离的相同范围？他们都可以使用绑定到隔离范围的属性吗？
例如,如果我对元素有两个指令
<e-directive a-directive prop="parentProp"/>
一个指令定义了带有bound属性的隔离范围
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) {
...
}
},
...
};
});
我最初的尝试(几乎按上面编码)失败了.
zsz*_*zep 19
我建议你通过辅助指令的require属性利用指令控制器之间的通信.第一个指令(e-directive)保存隔离范围,而第二个指令(a-directive)包含对第一个指令的引用,并通过第一个指令定义的函数设置属性.一小部分样本(参见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', 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");
}
};
});
| 归档时间： |
|
| 查看次数： |
29381 次 |
| 最近记录： |