Question

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

..指的是这个文件： 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: '='
        }
    };
});

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

在angularJS中堆叠指令

1 个答案: