2014-10-07 98 views
0

我想創建一對父子關係的指令。我發現'^ require'對此很好,但問題是我想同時在頁面上有多個指令實例,並且無法弄清楚如何告訴子指令哪些父指令是它們的父指令。多個父指令實例

一個例子是使用指令A作爲父母,B作爲孩子。如果我將A要求添加到指令B,它知道A是它的父親。但是,如果我有A1,A2,B1和B2,B指令仍然是A指令的子代,但我不能指定具有ID A1的A的實例是具有ID B1的B的父代,就像明智的A2是父代的B2。

也許我在做這個過於複雜或者只是走錯了方向。像往常一樣,任何想法或技巧值得讚賞。

+0

這是不是很清楚你要在這裏做什麼。你能發佈一些消息嗎? – 2014-10-07 20:34:49

回答

0

這裏有兩個想法:

1)指令可以共享與視圖的控制器範圍。因此,您可以在您的控制器中實現父/子關係,並使指令反映控制器的狀態。這種方法有幾個缺點:它嚴格地將您的指令綁定到控制器,並且很難在同一頁面上多次使用相同的指令。這些downers是重用的一大障礙!

2)指令可以利用html模板,它允許很多表達。因此,或許父/子關係可以在一個指令中表示,像這樣的:

myapp.directive('mydirective', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      parentData: '@', 
      childData: '@' 
     }, 
     template: 
      '<div ng-model={{parentData}}>' + 
       '<div ng-model={{childData}}>' + 
       '</div>' + 
      '</div>', 

     link: function (scope, element, attrs) { 
      //other behaviors go here 
     } 
    } 
}); 

上面的指令中的每個實例都可以有其獨特的父母和孩子通過分離範圍結合,因此它可以跨多個使用控制器/視圖。上面的模板可以像你需要的那樣複雜。如果模板比這更復雜,最好的做法是從一個單獨的html文件中加載它。
希望這會有所幫助。