Question

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

angular.module（＆＃39; myDirectives＆＃39;）。指令（＆＃39; tabPanel＆＃39;，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]参数＆＃39; controller＆＃39;不是函数，有字符串

现在，我知道它是一个字符串，但在普通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>'
    } 

}

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

1 个答案: