Question

我正在尝试使用父子关系创建一对指令。我发现'^ require'适用于此，但问题是我希望在页面上同时有多个指令实例，并且无法弄清楚如何告诉子指令哪个父指令是它们的父指令

一个例子是使用指令A作为父项，将B作为子项。如果我向指令B添加require A，它知道A是它的父级。但是，如果我有A1，A2，B1和B2，那么B指令仍然是A指令的子节点，但我不能指定具有id A1的A的实例是B的父节点，其中id为B1，因为明智的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文件中加载它希望这会有所帮助。

多个父指令实例

1 个答案: