如何讓兒童指令知道所有父母的角度？

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

我問的原因是我想要一張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訪問，非常感謝您的深思熟慮的回覆。你說得對，我應該把我的帖子分成更小的問題。我爲此道歉。你提供的小提琴爲我澄清了很多事情。自發布以來，我實際上設法回答了很多自己的問題，並且我採用了一種類似於您所建議的方法，將數據放在範圍內而不是控制器對象上。無論如何，再次感謝您花時間解讀我的所有問題並回答它們！ –

如何讓兒童指令知道所有父母的角度？

回答

相關問題