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

时间:2015-03-08 06:25:21

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

我正在尝试以下代码,但没有成功:

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工作得很好,但是当我定义控制器时它似乎不起作用。

1 个答案:

答案 0 :(得分:1)

实现这一目标的想法是,创建一个常量变量,将其分配给我们想要有条件加载的controller内部,我们希望通过观察$routeParams来设置控制器名称,因为我们可以注意$routeChangeStart,因此我们将设置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
    });
}]);

我没试过这个,我相信这段代码应该有效,谢谢。