javascript - Angular js 嵌套自定义指令

Question

我想在 Angular 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'到内部 Controller 以使其可作为元素访问。

然后更改require : 'outer'进入require : '^outer',以便在 parent 中查找此指令。

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

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

那么你就根本不需要编译参数了。 由于这个名为outercontrol的变量不会在outer指令中调用，而是在inner指令中调用，所以outer指令根本不需要编译，inner链接函数将被修改为这样:

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);
            }
        }
    });