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

可以使用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 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”]之一。

考虑到这一点，因为我只有大约3天的时间使用Angular，但到目前为止，这种方法对于我正在努力实现的目标非常有用。

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

在angularjs $ routeProvider中动态加载控制器

5 个答案: