Angular js嵌套自定义指令

Question

我想使用像角度js中的自定义指令嵌套这样的东西.有人能用简单的解决方案解释我吗？

下面的示例代码对我不起作用:

<outer>
    <inner></inner>
</outer>

JS

var app = angular.module('app',[]);
app.directive('outer',function(){
    return{
        restrict:'E',
        template:'<div><h1>i am a outer</h1></div>',
        compile : function(elem,attr){
            return function(scope,elem,att,outercontrol){
                outercontrol.addItem(1);
            }
        },
        controller : function($scope){
            this.addItem = function(val){
                console.log(val);
            }
        }
    }
});

app.directive('inner',function(){
    return{
        require : 'outer',
        template : '<div><h1>i am a inner</h1></div>',
        link:function(scope,elem,attr){

        }
    }
});

Answer 1

首先添加restrict:'E'到内部控制器以使其可作为元素访问.

然后将其更改require : 'outer'为require : '^outer',启用以在父项中查找此指令.

然后,您需要使用transclude <outer>通过以下步骤启用要查看的内容:

1. 添加transclude = true到外部指令.
2. 定义您希望查看内部数据的位置.(我猜你需要它出现在"我是外部"字符串之后,所以你可以修改外部字符串的模板就像这样template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>').

然后你根本不需要编译参数.因为这个名为outercontrol的变量不会在外部指令处调用,而是在内部指令处调用,因此根本不需要编译外部指令,内部链接函数将被修改为如下所示:

link: function(scope, elem, attr, outercontrol){
    outercontrol.addItem(1);
}

在所有这些修改之后,最终代码将如下所示:

在HTML:

<outer>
<inner></inner>
</outer>

在JS:

var app = angular.module("exampleApp",[]);
    app.directive('outer', function(){
        return{
            transclude:true,
            restrict:'E',
            template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>',
            controller : function($scope){
                this.addItem = function(val){
                    console.log(val);
                }
            }
        }
    });

    app.directive('inner',function(){
        return{
            restrict:'E',
            require : '^outer',
            template : '<div><h1>i am a inner</h1></div>',
            link:function(scope,elem,attr,outercontrol){
                outercontrol.addItem(1);
            }
        }
    });

Answer 2

如果你想要一个简单的解决方案，请查看这个plunkr。

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

app.directive('outer', function() {
    return {
        restrict: 'E',
        template: '<div style="border-style:solid"><h1>hey</h1><inner></inner></div>',
    }
});

app.directive('inner', function() {
    return {
        restrict: 'E',
        template: '<div style="border-style:solid"><h1>i am an inner</h1></div>',
    }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<div ng-app="app">
  <outer></outer>
</div>

问题是您正在使用指令的模板属性来破坏标签。这行：

    template:'<div><h1>i am a outer</h1></div>',

这样做。