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>的内容：

将transclude = true添加到外部指令。
定义您希望查看内部数据的位置。（我猜你需要它出现在“我是外部”字符串之后，这样你就可以修改外部字符串的模板，就像这个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

如果您想要一个简单的解决方案，请查看this plunkr.

＆＃13;

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

＆＃13;

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

＆＃13;

问题在于您使用指令的模板属性来修改标记。这一行：

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

是的。

Angular js嵌套自定义指令

2 个答案: