2014-10-07 97 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文件中加载它。
希望这会有所帮助。