使用函数使用 $routeProvider 定义控制器答案

【问题标题】：Defining a controller with $routeProvider using a function使用函数使用 $routeProvider 定义控制器
【发布时间】：2015-03-08 06:25:21
【问题描述】：

我正在尝试以下代码，但没有成功：

MyApp.config(['$routeProvider', '$provide', function($routeProvider, $provide) {
$routeProvider
    .when('/', {
        redirectTo: '/'
    })


    .when('/:page', {
        templateUrl: function($routeParams) {
            return 'views/'+ $routeParams.page +'.html';
        },

    })
    .when('/:page/:child*', {
        templateUrl: function($routeParams) {
            return 'views/'+ $routeParams.page + '/' + $routeParams.child + '.html';
        },
        controller: function($routeParams) {
            return  $routeParams.child + '.' +  $routeParams.page + 'Controller';
         },
    })

    .otherwise({
        redirectTo: '/'
    });
}]);

我想要完成的是使用基于 $routParams 变量的函数为每个视图定义控制器：

controller: function($routeParams) {
            return  $routeParams.child + '.' +  $routeParams.page + 'Controller';
         },

虽然它与 templateUrl 一起工作得很好，但当我定义控制器时它似乎不起作用。

【问题讨论】：

我可能只是错过了一些东西，但.when('/', { redirectTo: '/' }) 是不是有点奇怪？这不会导致循环吗？
我不知道，它对我有用，（即使我意识到我可以删除它，因为我声明了其他情况）
当您在控制器中运行时，它会创建一个新控制器并分配给该模板

标签： javascript angularjs url-routing single-page-application angularjs-routing

【解决方案1】：

实现这一点的想法是，创建一个常量变量，将其分配给controller，我们希望在其中有条件地加载，我们希望通过观察$routeParams来设置控制器名称，因为我们可以观察@987654323 @ ，因此我们将设置 costants.controllerName 值，这将是控制器的名称。

您可以通过以下方式实现此目的。

常数

MyApp.constant('constants',{
  controllerName : ''
});

配置

MyApp.config(['$routeProvider', '$provide','constants', function($routeProvider, $provide, constants) {
    $routeProvider
    .when('/', {
      redirectTo: '/'
    })
    .when('/:page', {
      templateUrl: function($routeParams) {
        return 'views/' + $routeParams.page + '.html';
      }
    })
    .when('/:page/:child*', {
      templateUrl: function($routeParams) {
        return 'views/' + $routeParams.page + '/' + $routeParams.child + '.html';
      },
      controller: constants.controllerName
    })
    .otherwise({
      redirectTo: '/'
    });
}]);

运行块

MyApp.run(['$rootScope', '$location', 'constants', '$routeParams',
  function($rootScope, $location, constants, $routeParams) {
    // register listener to watch route changes
    $rootScope.$on("$routeChangeStart", function(event, next, current) {
        constants.controllerName = $routeParams.child + '.' + $routeParams.page + 'Controller'; //set controller name on $routeChangeStart
    });
}]);

我还没有尝试过，我相信这段代码应该可以工作，谢谢。

【讨论】：

感谢您的帮助。但它不起作用。然后没有定义 $routParams。
我没有收到任何错误，我只是看到控制器不工作，因为它没有提供它应该提供的数据。当我试图在函数中放置一个“调试器”并放入控制台时：$routeParams.child + '.' + $routeParams.page + 'Controller' 我得到了：undefined.undefinedController
还将运行块内的事件更改为 $routeChangeSuccess，尽管 $routeChangeStart