Javascript 角度js嵌套自定义指令

我想在angular js中使用类似嵌套的自定义指令。有人能用简单的方法给我解释一下吗

下面的示例代码不适用于我：

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

JS

var-app=angular.module（'app'，[]）；
应用指令（'outer'，function（）{
返回{
限制：'E'，
模板：'我是外人'，
编译：函数（元素、属性）{
返回功能（范围、要素、附件、外部控制）{
外部控制附加项（1）；
}
},
控制器：功能（$scope）{
this.addItem=函数（val）{
控制台日志（val）；
}
}
}
});
应用程序指令（'内部'，函数（）{
返回{
要求：'外部'，
模板：“我是内在的”，
链接：功能（范围、要素、属性）{
}
}
});

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

var-app=angular.module（'app'，[]）；
应用指令（'outer'，function（）{
返回{
限制：'E'，
模板：“嘿”，
}
});
应用程序指令（'内部'，函数（）{
返回{
限制：'E'，
模板：“我是内在的”，
}
});
首先将
限制：'E'
添加到内部控制器，使其可以作为元素访问

然后将
require:'outer'
更改为
require:'^outer'，
，以启用在父级中查找此指令

然后，您需要使用transclude，通过以下步骤来查看
的内容：

将
transclude=true
添加到外部指令
定义要查看内部数据的位置。（我猜您需要它出现在“我是外部的”字符串之后，以便您可以修改外部的模板，使其类似于
模板：'I am a outer'
）
那么您根本不需要编译参数。
由于此名为outercontrol的变量不会在外部指令中调用，而是在内部指令中调用，因此根本不需要对外部指令进行编译，内部链接函数将修改为如下所示：

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

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

HTML：

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

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



js：

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

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

var-app=angular.module（“exampleApp”，[]）；
应用指令（'outer'，function（）{
返回{
是的，
限制：'E'，
模板：'我是外人'，
控制器：功能（$scope）{
this.addItem=函数（val）{
控制台日志（val）；
}
}
}
});
应用程序指令（'内部'，函数（）{
返回{
限制：'E'，
要求：“^outer”，
模板：“我是内在的”，
链接：功能（范围、要素、属性、外部控制）{
外部控制附加项（1）；
}
}
});
你可以这样做，但问题是什么？你必须使用转换。是的，当然我们可以用角度来做，我想知道为什么它不适合我。代码中有什么错误吗。我试着把它变为真。它不起作用。@sajankumar你有什么错误？@simpe我没有任何错误。它只呈现外部指令。我想呈现它的外部和内部指令类型的嵌套。检查我的代码。我不想像你的代码那样嵌套我的指令。我想要这样的东西。这个不是模块化的，它有点违背使用指令的观点。。你可以把你所有的逻辑放在一个指令里，这正是我想要的。非常感谢你们（Y）。@sajankumar你们应该接受他的回答，这非常有帮助@Mostafa Ahmed我有一个问题：在外部指令中，我使用Replace:true，但它不起作用。。我怎样才能解决这个问题？谢谢