动态插入ng-controller作为字符串的模板

Question

我有一个自定义指令，它的模板包含一个需要动态设置的ng-controller指令。这里是我的非工作的代码....

angular.module（ 'myDirectives'）指令（ '一个tabpanel'，函数（）{

return { 
    restrict: 'E', 
    scope: { 
     id: '@?tabId', 
     template: '@?', 
     controller: '@?' 
    }, 
    controller: 'TabPanelCtrl as tabPanelCtrl', 
    transclude: true, 
    template: getTemplate 
}; 

function getTemplate(element, attr) { 

    if(attr.template && attr.controller){ 
     return '<tab-panel-inner ng-include="template" ng-controller="controller" ng-transclude></tab-panel-inner>' 
    } 

    else{ 
     return '<tab-panel-inner ng-transclude></tab-panel-inner>' 
    } 

} 

function postLink(scope, element, attr, ctrls) { 

    var containerCtrl = ctrls[0]; 

    // Add container controller to scope if it exists. 
    if(containerCtrl){ 
     scope.tabPanelCtrl.containerCtrl = containerCtrl; 
    } 

    scope.tabPanelCtrl.initialize(); 

} 

}）。

我使用这样的指令：

<tab-panel tab-id="..." template="..." controller="TestTabFoldersCtrl as testTabFolders"></tab-panel> 

我得到的错误是：

错误：[NG：AREQ]参数 '控制器' 不是一个函数，得到了串

现在，我知道它是一个字符串，但是当你在普通的HTML中使用ng-controller属性时，你提供了一个字符串呢？

我试图改变模板这样：

return '<tab-panel-inner ng-include="template" ng-controller="{{controller}}" ng-transclude></tab-panel-inner>' 

我想花括号可能使评价它，但它并不能帮助。唯一可行的就是硬编码

Answer 1

你只需要在属性值连接成的模板字符串：

function getTemplate(element, attr) { 

    if(attr.template && attr.controller){ 
     var template ='<tab-panel-inner ng-include="' + attr.template + '"'; 
      template += ' ng-controller="'+ attr.controller + '" ng-transclude></tab-panel-inner>' 
     return template; 
    } 

    else{ 
     return '<tab-panel-inner ng-transclude></tab-panel-inner>' 
    } 

}