Question

我有一个指令，模板包含另一个指令：

var myModule = angular.module('mymodule', []);

myModule.directive('directive1', function() {
    return {
       restrict: 'E',
       scope: {
          config: '@'
       },
       template: '<div ng-controller="mycontroller", ng-init={{config}}><directive2 config={{config}}></directive2></div>'
    }
}

代码有点奇怪，并且directive1的目的是像＃34;包装器＆＃34;，这样它接受配置然后将它传递给＆＃34; mycontroller＆＃34 ;和指令2.

我尝试了但不知何故mycontroller没有接受配置;它说配置是未定义的。

只是想知道它在Angular中是否支持，还是有更好的方法可以做到这一点？

感谢。

Answer 1

当然，您可以使用嵌套指令。

但你的指令模板中几乎没有错误。请查看下面的示例并相应地修复您的模板。

.directive('directive1', function() {
    return {
       restrict: 'E',
       scope: {
          config: '='
       },
       template: '<div>Config1:{{config}}<directive2 config="config"></directive2></div>',
       link: function(scope) {
         scope.config = {
           test: 'from directive1'
         };
       }
    }
})

.directive('directive2', function() {
    return {
       restrict: 'E',
       scope: {
          config: '='
       },
       template: '<div>config2: {{config}}</div>'
    }
});

最后，这是一个显示嵌套指令的plunker。

Answer 2

此处的问题是您在指令模板中使用ng-controller="mycontroller"创建新控制器。

ng-controller创建一个新范围，因此配置对象不存在于mycontroller的范围内。如果您只是删除ng-controller="mycontroller"，它就会有用。

AngularJS指令模板可以呈现另一个指令吗？

2 个答案: