在动态生成的AngularJS指令中访问父控制器_Angularjs_Angularjs Directive

在动态生成的AngularJS指令中访问父控制器

angularjs

在动态生成的AngularJS指令中访问父控制器,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我有一些项目存储在数据库中。每个项目都有一个“类型”。我想使用此类型根据该类型动态插入指令。我的html看起来像： <ul> <li my-item ng-repeat="item in items"></li> </ul 然后我有更多的指令来定义“具体的”项目类型。例如，类型为“Type1”的项将使用“myItemType1”指令（如下所示）那就好了。现在，我还需要一个父指令来包装这些指令的所有实例，并提供一个控制器来允许它们之间的协调我使用

我有一些项目存储在数据库中。每个项目都有一个“类型”。我想使用此类型根据该类型动态插入指令。我的html看起来像：

<ul>
  <li my-item ng-repeat="item in items"></li>
</ul

然后我有更多的指令来定义“具体的”项目类型。例如，类型为“Type1”的项将使用“myItemType1”指令（如下所示）

那就好了。现在，我还需要一个父指令来包装这些指令的所有实例，并提供一个控制器来允许它们之间的协调

我使用

myItem

指令上的

require^parentCtrl

语法访问父控制器

我的问题是，这不适用于任何“动态”插入的指令，如“myItemType1”

下面和下面的完整示例。标记：

<body ng-controller="MainCtrl">
    <div my-container>
        <ul>
            <li my-item ng-repeat="item in items"></li>
        </ul>
    </div>
</body>

守则：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.items = [{
        type: 'type1',
        content: 'Type 1 item'
    }, {
        type: 'type1',
        content: 'Another Type 1 item'
    }];
});

app.directive('myContainer', function(){
    return {
        controller: function() {
            this.doSomething = function() {
                return 'foo';
            }
        }
    };
});

app.directive('myItem', function($compile){
    return {
        require: '^myContainer',
        link: function(scope, el, attrs, myContainer) {

            // 'myContainer' is a reference to parent controller
            console.log('Ctrl in myItem:', myContainer);

            var concreteTypeEl = $compile('<div my-item-' + scope.item.type + ' item="item"></div>')(scope);
            el.append(concreteTypeEl);
        }
    };
});

app.directive('myItemType1', function($compile){
    return {
        require: '?^myContainer',
        link: function(scope, el, attrs, myContainer) {

            // PROBLEM: 'myContainer' is undefined here
            console.log('Ctrl in myItemType1:', myContainer);

            el.append(scope.item.content);
        }
    };
});

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.items=[{
类型：“类型1”，
内容：“类型1项目”
}, {
类型：“类型1”，
内容：“另一类型1项目”
}];
});
应用程序指令（'myContainer'，函数（）{
返回{
控制器：函数（）{
this.doSomething=函数（）{
返回“foo”；
}
}
};
});
应用程序指令（'myItem'，函数（$compile）{
返回{
要求：“^myContainer”，
链接：功能（范围、el、属性、myContainer）{
//“myContainer”是对父控制器的引用
log（'Ctrl-in-myItem:'，myContainer）；
变量concreteTypeEl=$compile（“”）（范围）；
el.追加（具体类型el）；
}
};
});
应用程序指令（'myItemType1'，函数（$compile）{
返回{
要求：“？^myContainer”，
链接：功能（范围、el、属性、myContainer）{
//问题：此处未定义“myContainer”
log（'myItemType1:'中的Ctrl，myContainer）；
el.追加（范围、项目、内容）；
}
};
});

我这样做完全错了吗？

在手动编译和链接DOM树之前，您应该将元素附加到DOM树中：

link:function(scope,element,attr) {
    // create the element
    var e = angular.element('<my-child></my-child>');           
    //append it to the DOM  
    element.append(e);
    // compile and link
    $compile(e)(scope);
}

链接：函数（范围、元素、属性）{
//创建元素
var e=角度元素（“”）；
//将其附加到DOM中
元素。附加（e）；
//编译链接
美元（e）（范围）；
}

link:function(scope,element,attr) {
    // create the element
    var e = angular.element('<my-child></my-child>');           
    //append it to the DOM  
    element.append(e);
    // compile and link
    $compile(e)(scope);
}