dynamisch laden der Controller in angularjs $ routeProvider

Question

Ich habe derzeit eine AngularJS App mit Routing eingebaut und es funktioniert perfekt mit statischen controller Eigentum Zuordnungen. aber was will ich wirklich zu tun ist, um dynamisch Controller zuweisen mit verschiedenen Routen:

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

Was würde ich tun möchte, ist das gleiche über meine controller Eigenschaft zu tun hier, wie:

$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) 
      } 
    }) 

aber wie es scheint, bekomme ich einen Fehler, paramsProvider wird nicht gefunden

so gibt es eine Möglichkeit, ich könnte meine Controller-Funktion Name in Route-Konfiguration dynamisch laden?

Answer 1

Ich habe das gleiche versucht. Eine Lösung, die ich gefunden habe, ist, dies zu tun in Ihrem routeProvider:

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

Und dann Sie tun, um Ihre Berechnung für das, was „pseudo-Controller“ (in Ermangelung eines besseren Namen) im Innern des „dynamicController“ laden Definition.

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); 
}]); 

Dies setzt voraus, dass $ routeParams.dashboardName eines ist [ "uno", "dos"].

Nehmen Sie dies mit einem Körnchen Salz, da ich nur etwa 3 Tage mit Angular hatte, aber bis jetzt hat dieser Ansatz für das, was ich zu erreichen versuche, großartig funktioniert.

Answer 2

Ich löste dieses Problem, indem ich den Controller in $ routeProvider nicht spezifizierte, sondern ihn stattdessen in der in templateURL angegebenen Datei platzierte.

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

In DashboardsNAME.html

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

Diese Technik erfordert immer noch, dass irgendwann vor der Strecke instanziiert Sie haben DashboardsNAMEController registriert. Ich vermute, dass der beste Ort, um es zu tun ist in der module.run() Methode mit Anruf zu Ihrem eigenen Service, aber ich mache es in meinem Hauptcontroller, weil es funktioniert und ist sowieso ein kurzer Controller.

Answer 3

Dies ist möglich mit angular ui-router.

Mit dem UI-Router können Sie einen "controllerProvider" angeben, um eine Funktion zum Bereitstellen eines Controllers anzugeben. Also würde die Lösung so aussehen:

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

Ich hoffe es hilft!

Answer 4

Ich weiß nicht, ob es auf AngularJS-Version abhängt, aber Sie können eine Funktion zu der controller Eigenschaft dienen, die Funktion wird der eigentliche Controller. Mit dieser Tatsache in Verbindung mit controller inheritance Sie einen kompakteren Code wie das erhalten Sie gesucht haben, denke ich:

$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}); 
    } 
}) 

Disclaimer: Ich weiß ehrlich nicht, ob dieser Ansatz keine Nachteile. Sieht nicht so aus.

Answer 5

Hier ist etwas, das auch funktioniert (zumindest für mich).Dies kann zukünftigen Menschen helfen, nach Antworten zu suchen.

$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; 
     }, 

Nicht der kürzeste Code, aber zumindest einfacher zu lesen. Auch wenn Sie dem controller einen anderen Namen geben wollen als der Name des Tabs/DashboardName.