如何让儿童指令知道所有父母的角度？

我怎样才能知道所有的祖先，而不仅仅是他们的直接父母的子指令？

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

来源

2013-04-02 David Sanders

可能想要共享数据的服务，可以通过任何控制器或指令 – charlietfl

（您的问题相当多的问题，你会好起来的，并有可能更快，答案，如果你张贴每个单独的问题，用简约的小提琴或蹲跳者来演示问题/问题）。

我怎样才能知道所有祖先的子指令，而不仅仅是他们的直接父对象？

如果指令不创建分离范围（在你提供的，没有你的指令都在做这个示例代码），则该指令必须通过normal JavaScript prototypal inheritance访问所有祖先的$范围。

所以，如果你确定你的指令$scope是你的数据，孩子的指令就可以直接访问这些数据：

例如，如果你有这样的代码在父指令的控制器功能：

$scope.paper = new Raphael($element[0], 220, 220);

然后孩子的指令都可以访问它（在他们的控制器或链接功能）：

var paper = $scope.paper; // prototypal inheritance will find it

我想要一张拉斐尔纸张指令，为所有的孩子提供一张拉斐尔纸张的参考。

所以，在rlPaper指令，定义在该指令的$scope（不this）一个“拉斐尔纸”对象。在指令的控制器功能中执行此操作，而不是链接功能，因为链接功能将运行得太晚。（Fiddle显示指令的控制器和链接函数何时运行，有两个嵌套指令。）

rlShape指令的链接函数如何访问自己的控制器？

有办法做到这一点，但我认为更好的办法是把对指令的$scope，这是由指令的链接和控制器功能共享您的数据和功能。

在rlCircle指令中，如果将数据放在$scope对象上，则不必要求其他父控制器。

来源

2013-04-03 04:04:56

Mark访问，非常感谢您的深思熟虑的回复。你说得对，我应该把我的帖子分成更小的问题。我为此道歉。你提供的小提琴为我澄清了很多事情。自发布以来，我实际上设法回答了很多自己的问题，并且我采用了一种类似于您所建议的方法，将数据放在范围内而不是控制器对象上。无论如何，再次感谢您花时间解读我的所有问题并回答它们！ –

如何让儿童指令知道所有父母的角度？

回答

相关问题