使用函数定义带有 $routeProvider 的控制器
Defining a controller with $routeProvider using a function
我正在尝试以下代码,但没有成功:
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 一起工作得很好,但当我定义控制器时它似乎不起作用。
实现这个的想法是,创建一个常量变量,分配给我们想要有条件加载的 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
});
}]);
我没试过,我相信这段代码应该可以,谢谢。
我正在尝试以下代码,但没有成功:
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 一起工作得很好,但当我定义控制器时它似乎不起作用。
实现这个的想法是,创建一个常量变量,分配给我们想要有条件加载的 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
});
}]);
我没试过,我相信这段代码应该可以,谢谢。