カスタムディレクティブのattrバインディングが機能しない

Question

私が作成しようとしているタブ/パネルディレクティブで問題が発生しました。私はテンプレートとコントローラを各パネルに、HTML内の文字列として、またはバインドする式として提供する必要があります。例えば。私は上のコンテンツを切り替えるためにNG-場合、各パネルの内側を使用してオフにし、ANてる

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

    } 

}); 

したがって、テンプレートの属性はきれいであり、式が評価され、結果の文字列がng-include属性に挿入されます。しかし、これを固定

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

誰の助けが本当にいただければ幸いです... NG-コントローラ属性は、何らかの理由でそれを好きではないと私は、次のコンソールエラーが発生します。

EDIT：だけ明確にするために、ディレクティブのコントローラは結構です、それはそれはなっていないなどの問題を引き起こしているディレクティブのテンプレートでNG-コントローラ=「コントローラ」ビット

ですコントローラ名が渡されたの「@」結合を評価結果

EDIT 2：

私はそれが最初の答えとは何かを持っているかなり確信している彼女e。

AngularJS: dynamically assign controller from ng-repeat

具体的に、このビット：

「あなたの問題はNG-コントローラは、自身をコントローラコントローラの名前を持つだけでなく、文字列を指すべきであるということです」

コントローラの名前は、ディレクティブ内のスコープ変数に含まれていますが、このダイナミックを保持したい場合、どのように他の方法を使用できるかわからない文字列です。

Answer 1

バインドされているコントローラに基づいてコントローラを動的に設定したいようです。

このコードでは、ng-controllerは文字列 "controller"にバインドされています。これは、スコープバインディング内のコントローラと同じではありません。あなたの代わりに、文字列のコントローラオブジェクトにアクセスしているように、

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

またはこの

...ng-controller="' + attr.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>'; 
     } 

私はあなたがこれを行う必要があると思います。