Динамическая загрузка контроллера в angularjs $routeProvider

В настоящее время у меня есть приложение 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 не найден

так можно ли каким-либо образом динамически загрузить имя моей функции контроллера в настройке маршрута?

Ответы

Ответ 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";
       }
  })

Надеюсь, это поможет!

Ответ 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() с вызовом вашей собственной службы, но я делаю это в своем основном контроллере, потому что он работает и в любом случае является коротким контроллером.

Ответ 3

Я пытаюсь сделать то же самое. Одно из решений, которое я нашел, - это сделать это внутри вашего маршрута. Провайдер:

 $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, но до сих пор этот подход отлично поработал для того, что я пытаюсь выполнить.

Ответ 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});
    }
})

Отказ от ответственности: я, честно говоря, не знаю, есть ли у этого подхода какие-либо недостатки. Не выглядит так, хотя.

Ответ 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.