1

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

这似乎与这个问题类似： Extended 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
    };
});
4

1 回答 1

0

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

<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: '='
        }
    };
});

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

于 2013-10-23T22:26:50.930 回答