这篇文章有点长。
如何才能让子指令了解其所有祖先，而不仅仅是其直接父级？
我问的原因是我想要一个 Raphael 论文指令，为它的所有子项提供 Raphael 论文的引用。另外，我试图有一个“rl-shape”指令，可以将不同的形状组合在一起，这样它们就可以同时进行翻译、转换等。我还希望这个“rl-shape”指令能够出现在其自身内部，从而允许任意形状的树。
可能有一种完全不同的、更好的方法来做到这一点。如果是这样，请纠正我。
这是我到目前为止的代码:
<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app="myApp">
<head>
<title>Test</title>
<script src="js/underscore.js"></script>
<script src="js/raphael-min.js"></script>
</head>
<body>
<rl-paper>
<rl-shape name="myShape">
<rl-circle name="inner" cx="0" cy="0" r="50"></rl-circle>
<rl-circle name="outer" cx="0" cy="0" r="100"></rl-circle>
</rl-shape>
</rl-paper>
<p>
<button ng-click="myShape.translate(0, -10)">Move shape up</button>
<button ng-click="myShape.translate(0, 10)">Move shape down</button>
</p>
<script src="js/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
function Shape(children) {
this.translate = function(dx, dy) {
_.each(children, function(c) { c.translate(dx, dy); });
};
}
myApp.directive("rlPaper", function() {
return {
restrict: "E",
controller: function($element) {
this.paper = new Raphael($element[0], 220, 220);
this.paper.setViewBox(-110, -110, 220, 220);
}
};
});
myApp.directive("rlShape", function () {
return {
restrict: "E",
require: ["^rlPaper"],
controller: function($scope, $element, $attrs, $transclude) {
this.children = [];
},
link: function(scope, element, attrs, ctrls) {
// How can the link function of the rlShape directive access its
// own controller? If I could figure that out, I could do
// something like the following:
var shapeCtrl = undefined; // Don't know how to get this
var shape = Shape(shapeCtrl.children);
scope[attrs.name] = shape;
}
};
});
myApp.directive("rlCircle", function() {
return {
restrict: "E",
require: ["^rlPaper", "?^rlShape"],
link: function(scope, element, attrs, ctrls) {
var paperCtrl = ctrls[0];
var shapeCtrl = ctrls[1];
var circle = paperCtrl.paper.circle(attrs.cx, attrs.cy, attrs.r);
scope[attrs.name] = circle;
if ( shapeCtrl ) {
shapeCtrl.children.push(circle);
}
}
};
});
</script>
</body>
</html>
最佳答案
(您的问题中有相当多的问题。如果您为每个问题发布单独的问题，并用简约的 fiddle 或 plunker 演示问题/疑问，您会得到更好、可能更快的答案。)
How can I have child directives that are aware of all of their ancestors, not just their immediate parent?
如果指令未创建隔离作用域(在您提供的示例代码中，没有任何指令执行此操作)，则该指令可以通过 normal JavaScript prototypal inheritance 访问所有祖先的 $scopes .
因此，如果您在指令的 $scope 上定义数据，子指令将能够直接访问该数据:
例如，如果您在父指令的 Controller 函数中有此代码:
$scope.paper = new Raphael($element[0], 220, 220);
然后子指令可以访问它(在其 Controller 或链接函数中):
var paper = $scope.paper; // prototypal inheritance will find it
I want to have a Raphael paper directive that provides a reference to a Raphael paper to all its children.
因此，在 rlPaper 指令中，在该指令的 $scope 上(而不是在 this 上)定义一个“Raphael paper”对象。在指令的 Controller 函数中执行此操作，而不是链接函数，因为链接函数将运行得太晚。 ( Fiddle 显示指令的 Controller 和链接函数何时运行，带有两个嵌套指令。)
How can the link function of the rlShape directive access its own controller?
有一种方法可以做到这一点，但我认为更好的方法是将数据和函数放在指令的 $scope 上，该指令的链接和 Controller 函数共享该数据和函数。
在 rlCircle 指令中，如果您将数据放入 $scope 对象中，则不必需要其他父 Controller 。
关于javascript - 如何使子指令在 Angular 中了解其所有 parent ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15769118/