在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屬性做同樣的事情，比如：

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

但似乎我得到一個錯誤說沒有找到paramsProvider

那么有什么方法可以在路由配置中動態加載我的控制器功能名稱？

Answer 1

這可以使用角度ui路由器 。

ui-router允許您指定“controllerProvider”以指定用於提供控制器的功能。 所以解決方案看起來像這樣：

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

我希望它有所幫助！

Answer 2

我沒有在$ routeProvider中指定控制器，而是將其放在templateURL中指定的文件中，從而解決了這個問題。

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

在DashboardsNAME.html

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

此技術仍然要求在實例化路徑之前的某個時刻，您已注冊DashboardsNAMEController 。 我懷疑最好的地方是在module.run()方法中調用你自己的服務但我在我的主控制器中這樣做是因為它工作並且無論如何都是一個短控制器。

Answer 3

我一直在嘗試同樣的事情。 我發現的一個解決方案是在routeProvider中執行此操作：

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

然后你計算加載“dynamicController”定義內部的“偽控制器”（缺少更好的名稱）。

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”]之一。

拿這個用一粒鹽，因為我和Angular只有大約3天的時間，但到目前為止，這種方法對於我想要完成的工作非常有效。

Answer 4

我不知道它是否依賴於AngularJS版本，但你可以為controller屬性提供一個函數，該函數成為實際的控制器。 將此事實與控制器繼承結合使用，您可以獲得更精簡的代碼，就像您正在尋找的代碼一樣，我認為：

$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名稱不同的名稱。