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

Question

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

angular.module('myDirectives').directive('tabPanel', function() {

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>'
    } 

}