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

dynamically loading the controller in angularjs $routeProvider

本文关键字：动态 加载 控制器 routeProvider angularjs      更新时间：2023-09-26

我目前有一个内置路由的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没有找到

那么，有什么方法可以在路由配置中动态加载我的控制器函数名吗？

使用angular ui路由器可以做到这一点。

ui路由器允许您指定一个"controllerProvider"来指定用于提供控制器的函数。所以解决方案看起来是这样的：

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

我希望它能有所帮助！

我解决了这个问题，没有在$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()方法中调用您自己的服务，但我在我的主控制器中这样做，因为它可以工作，而且无论如何都是一个短控制器。

我一直在尝试同样的事情。我发现的一个解决方案是在你的路线内这样做。提供者：

 $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天，但到目前为止，这种方法对我试图实现的目标非常有效。

我不知道它是否取决于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});
    }
})

免责声明：我真的不知道这种方法是否有任何缺点。但看起来并不是这样。

这里有一些同样有效的东西（至少对我来说）。这可能会帮助未来的人们寻找答案。

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

相关文章：