javascript - AngularJS 中的堆叠指令

Question

我想知道如何/是否可以扩展或堆栈 AngularJS 指令行为。我想要实现的是将自定义指令定义为 div 中的属性，并能够通过多次调用向 div 累积添加元素。

这似乎是一个与此类似的问题: Extending Angular Directive

..引用了此文档: https://github.com/angular/angular.js/wiki/Understanding-Directives

文档提到了堆栈指令的概念..但没有很多细节。下面基本上是我正在尝试的内容，但是当我添加第二个指令调用时，它会给出错误。想知道是否有任何方法可以实现这种目标。动机是主应用程序将具有一些基本内容，但其他人可以在不修改原始代码的情况下扩展它。有更好的方法来实现这一目标吗？

错误:

Error: Multiple directives [myDirective, myDirective] asking for template on: <div my-directive="">

代码:

<div my-directive></div>

myApp.directive('myDirective', function() {
    return {
        restrict: 'EA',
        template : '<div>custom directive 1</div>',
        replace : false
    };
});

.... 

myApp.directive('myDirective', function() {
    return {
        restrict: 'EA',
        template : '<div>custom directive 2</div>',
        replace : false
    };
});

Answer 1

不能有两个具有相同名称和不同模板的指令。您想要的是一个指令在页面上具有多个实例。由于您希望模板中的数据不同，因此需要隔离每个实例的范围...

<div my-directive isolatedProperty="1"></div>
<div my-directive isolatedProperty="2"></div>

myApp.directive('myDirective', function() {
    return {
        restrict: 'EA',
        template : '<div>custom directive {{isolatedProperty}}</div>',
        replace : false,
        scope: {
          isolatedProperty: '='
        }
    };
});

将作用域属性添加到指令中告诉 Angular 该指令的每个实例都应该有自己的作用域。 “=”表示从页面上的指令声明中具有相同名称的 HTML 属性中提取该值。您还应该考虑使用“@”和“&”。