自定义指令attr绑定不起作用

Question

我在尝试制作的选项卡/面板指令中遇到问题。 我需要能够为每个面板提供模板和控制器，既可以作为HTML中的字符串，也可以作为要绑定的表达式。 例如，我需要能够这样称呼...

<tab-panel tab-id="tab1" 
    template="myTemplate.html" 
    controller="AdminController as adminController"
></tab-panel>

或像这样

<tab-panel tab-id="tab1" 
    template="{{model.tabTemplate}}" 
    controller="{{model.tabController}}"
></tab-panel>

我在每个面板内部使用ng-if来打开和关闭内容，并使用ng-include和ng-controller来加载内容。这是我的指令的简化测试案例。

// Tab Panel Directive Controller
.controller('TabPanelCtrl', function(){
    // removed for brevity
})

// Tab Panel Directive
.directive('s4pTabPanel', function($interpolate) {

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


    function getTemplate(element, attr) {


        // removed for brevity

        // Panel loads template and controller
        if(attr.template && attr.controller){
            return  '<tab-panel-inner ng-if="loadContent" ng-include="template" onload="onPanelLoaded()" ng-controller="controller"></tab-panel-inner>';
        }

        // removed for brevity

    }

});

因此，template属性似乎很好，对表达式求值并将结果字符串插入ng-include属性。 但是ng-controller属性由于某种原因不喜欢它，并且出现以下控制台错误...

Error: ng:areq
Bad Argument
Argument 'controller' is not a function, got string

任何帮助解决此问题的人将不胜感激。

编辑：

需要明确的是，指令上的控制器很好，这是指令模板中的ng-controller =“ controller”位，这引起了一个问题，因为它没有获得控制器名称为'@'绑定的评估结果通过了。

编辑2：

我很确定这与这里的第一个答案有关。

AngularJS：从ng-repeat动态分配控制器

具体来说：

“您的问题是ng-controller应该指向控制器本身，而不仅仅是指向控制器名称的字符串。”

控制器的名称包含在指令内部的作用域变量中，但是它是一个字符串，不确定如果我想保持动态性，可以采用任何其他方式。

Answer 1

似乎您想基于绑定的控制器动态设置控制器。

在此处的代码中，ng-controller绑定到字符串“ controller”。 这与作用域绑定中的控制器不同。

// Panel loads template and controller
        if(attr.template && attr.controller){
            return  '<tab-panel-inner ng-if="loadContent" ng-include="template" onload="onPanelLoaded()" ng-controller="controller"></tab-panel-inner>';
        }

我认为您需要这样做：

...ng-controller="' + controller + '" ...

或这个

...ng-controller="' + attr.controller + '" ...

这样您就可以访问控制器对象而不是字符串。