javascript Angular js 嵌套自定义指令

Angular js Nesting custom directives

提问by sajan

I want to use something like nesting with custom directives in angular js. Could anyone explain me with simple solution ?

我想在 angular js 中使用诸如嵌套自定义指令之类的东西。谁能用简单的解决方案解释我？

example code is below is not working for me :

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

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

JS

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){

        }
    }
});

回答by Mostafa Ahmed

First add restrict:'E'to the inner controller to make it accessible as an element.

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

Then change the require : 'outer'into require : '^outer',to enable looking for this directive in parents.

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

Then you need to use transclude to enable the content of the <outer>to be viewed, by the following steps:

然后你需要使用transclude来开启<outer>查看的内容，步骤如下：

1. add transclude = trueto the outer directive.
2. define where you want the inner data to be viewed. (I guess you need it to appear after the "i am outer" string so you can modify the template of the outer one to be like this template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>').

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

Then you don't need to the compile parameter at all. As this variable which called outercontrol will not be called at the outer directive but at the inner directive so there is no need to the compile at all for the outer directive and the inner link function will be modified to be like this:

那么你根本不需要编译参数。由于这个调用outercontrol的变量不会在外部指令中调用，而是在内部指令中调用，因此根本不需要为外部指令进行编译，内部链接函数将被修改为如下所示：

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

after all this modification the final code will be like the following:

在所有这些修改之后，最终的代码将如下所示：

the HTML:

在HTML：

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

the js:

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

回答by Peter Ashwell

If you want a simple solution, check out this plunkr.

如果您想要一个简单的解决方案，请查看此 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>

The problem is that you're nuking the tag with the template attribute of the directive. This line:

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

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

Does that.

是吗。