在模板中动态插入 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] 参数 'controller' 不是函数，得到字符串

现在，我知道它是一个字符串，但是在正常情况下使用 ng-controller 属性时肯定 HTML 您为其提供了一个字符串？

我试过将模板更改为：

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

}

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

Dynamically insert ng-controller in template as string

javascript

angularjs

angular-directive