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>'就像這個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>',

那樣做。