gpt4 book ai didi

javascript - 如何使子指令在 Angular 中了解其所有 parent ?

转载 作者:行者123 更新时间:2023-11-28 20:34:10 24 4
gpt4 key购买 nike

这篇文章有点长。

如何才能让子指令了解其所有祖先,而不仅仅是其直接父级?

我问的原因是我想要一个 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com