angularjsでコントローラを動的にロードする$ routeProvider

Question

現在ルーティングが組み込まれているAngularJSアプリがあり、静的なcontrollerプロパティの割り当てで完全に機能します。しかし、私が本当にやりたいことは、動的に異なるルートでコントローラを割り当てることです：

$routeProvider 
.when("/Dashboards/:dashboardName",{ 
     templateUrl:function(params) { 
      return "Dashboards/" + params.dashboardName; 
      //some ASP.NET MVC calls to return partial views (this part works) 
      }, 
     controller: function(params) { 
      return params.dashboardName+"Controller"; (this part DOESN'T work) 
      } 
    }) 

：

$routeProvider 
.when("/Dashboards/:dashboardName",{ 
    templateUrl:function(params) { 
       return "Dashboards/" + params.dashboardName; 
       //some ASP.NET MVC calls to return partial views (this part works) 
     } 
    }) 

私がやりたいどのような、ここで私のcontrollerプロパティについて同じことを行うことですしかし、私はエラーが表示されますparamsProviderが見つかりませんでした

私は動的に私のコントローラの機能名をロードすることができる方法はありますか？

Answer 1

私はこれと同じことを試みています。

$routeProvider 
    .when("/Dashboards/:dashboardName",{ 
     templateUrl:function(params) { 
      return "Dashboards/" + params.dashboardName; 
     }, 
     controller: 'dynamicController' 
}); 

そしてあなたは「dynamicController」の内側にロードする（より良い名前の不足のために）どのような「疑似コントローラ」のためのあなたの計算を実行します。私が見つけた一つの解決策は、あなたのrouteProvider内にこれを行うことです定義。

var controllers = { 
    unoController: function($scope, $routeParams, $rootScope) { 
     // Do whatever 
    }, 
    dosController: function($scope, $routeParams, $rootScope) { 
     // Whatever for this controller 
    } 
} 

app.controller('dynamicController', ['$scope', '$routeParams', '$rootScope', function($scope, $routeParams, $rootScope) { 
    controllers[$routeParams.dashboardName+"Controller"]($scope, $routeParams, $rootScope); 
}]); 

これは、$ routeParams.dashboardNameが["uno"、 "dos"のいずれかであることを前提としています。

私は約3日間しか角を持っていなかったので、これを塩の塊で取るが、これまでのところ、このアプローチは私が達成しようとしているものに対してはうまくいった。

Answer 2

コントローラを$ routeProviderに指定せず、代わりにtemplateURLで指定されたファイルに配置することで、この問題を解決しました。 DashboardsNAME.html

<div class="container" ng-Controller='DashboardsNAMEController'>Food</div> 

で

$routeProvider 
.when("/Dashboards/:dashboardName",{ 
    templateUrl:function(params) { 
       return "Dashboards/" + params.dashboardName; 
     } 
    }) 

この技術はまだルートがインスタンス化される前に、いくつかの点であなたがDashboardsNAMEControllerを登録していることが必要です。私はそれを行う最良の場所は、自分自身のサービスへの呼び出しとmodule.run()メソッドにあると思うが、それは動作し、とにかく短いコントローラであるため、私は私のメインコントローラでそれを行う。

Answer 3

angular ui-routerを使用してこれを行うことができます。

ui-routerでは、「controllerProvider」を指定してコントローラを提供する機能を指定できます。ソリューションは次のようになります：

$stateProvider 
.state("/Dashboards/:dashboardName",{ 
    templateUrl:function($stateParams) { 
     return "Dashboards/" + $stateParams.dashboardName; 
     }, 
    controllerProvider: function($stateParams) { 
     return $stateParams.dashboardName+"Controller"; 
     } 
    }) 

私はそれが助けてくれることを願っています！

Answer 4

AngularJSバージョンに依存しているかどうかわかりませんが、実際のコントローラになる機能はcontrollerのプロパティに提供できます。あなたが探していたような、より凝縮されたコードを取得することができcontroller inheritanceと一緒にこの事実を使用して、私は思う：

$routeProvider 
.when("/Dashboards/:dashboardName",{ 
    templateUrl:function(params) { 
     return "Dashboards/" + params.dashboardName; 
    }, 
    controller: function($scope, $routeParams, $controller) { 
     /* this creates a child controller which, 
      if served as it is, should accomplish 
      your goal behaving as the actual controller 
      (params.dashboardName + "Controller") */ 
     $controller($routeParams.dashboardName + "Controller", {$scope:$scope}); 
    } 
}) 

免責条項：このアプローチは、任意の欠点を持っている場合、私は正直わかりません。しかし、そうは見えません。

Answer 5

これはまた、（少なくとも私のために）動作するものです。これは、将来の人々が答えを探しているのに役立ちます。

$stateProvider 
    .state('foo', { 
     url: '/foo/:bar', 
     templateUrl: 'some-template-path.html', 
     resolve : { 
      getController : function($stateParams){ 
       if ($stateParams.bar === "tab1") { 

        return "tab1Controller" 

       }else if ($stateParams.bar === "tab2") { 

        return "tab2Controller" 

       }else if ($stateParams.bar === "tab3"){ 

        return "tab3Controller" 

       }else if ($stateParams.bar === "tab4") { 

        return "tab4Controller" 

       } 
      } 
     }, 
     controllerProvider: function(getController){ 
      return getController; 
     }, 

少なくとも最短のコードではなく、少なくとも読みやすい。また、controllerにtab/dashboardNameの名前とは異なる名前を付ける場合もあります。