多个父指令实例

Question

我正在尝试创建一对具有父子关系的指令。 我发现'^ require'可以很好地解决这个问题，但是问题是我想同时在页面上拥有多个指令实例，并且不知道如何告诉子指令哪个父指令是其父指令。

例如，将指令A用作父级，将B用作子级。 如果我将要求A添加到指令B中，它将知道A是它的父级。 但是，如果我有A1，A2，B1和B2，则B指令仍然是A指令的子代，但我无法指定ID为A1的A实例是ID为B1的B的父代，就像明智的A2是父代B2。

也许我把它弄得太复杂了，或者只是朝错误的方向前进。 与往常一样，任何想法或技巧都值得赞赏。

Answer 1

这里有两个想法：

1）指令可以与视图的控制器共享范围。 因此，您可以在控制器中实现父/子关系，并让指令反映控制器的状态。 这种方法有几个缺点：它将您的指令紧密地绑定到控制器，并使得在同一页面上多次使用同一指令变得困难。 这些唐纳犬是重用的一大障碍！

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文件中加载模板。
希望这可以帮助。