问题描述
我正在尝试根据 stateparam 加载控制器以使其可重用
I am trying to load a controller based on a stateparam to make it reusable
.state("dashboard.item.detail", {
url: "/detailId/:detailId/detailName/:detailName",
views: {
'main@': {
templateUrl: function ($stateParams){
//move this to a util function later
var tempName = unescape($stateParams.detailName);
tempName = tempName.replace(/\s/g, "-");
return '../partials/slides/' + tempName + '.html';
},
resolve: {
DetailData: ['DetailService', function(DetailService){
return DetailService.getDetails();
}]
},
controller: function ($stateParams) {
console.log( $stateParams.detailName + 'Ctrl');
return $stateParams.detailName + 'Ctrl';
}
}
}
})
控制器
.controller('NemtCtrl', ['$scope', '$rootScope', 'DetailData', function ($scope, $rootScope, detailData) {
console.log(detailData);
}]);
如果我删除该功能并直接使用控制器将工作(控制台将记录 detailData)
The controller will work if I remove the function and just use (console will log detailData)
controller: 'NemtCtrl'
但如果我这样做就行不通:
But won't work if I do:
controller: function ($stateParams) {
return 'NemtCtrl';
}
我在这里做错了什么?有没有更好的方法来做到这一点?
What am I doing wrong here? Is there a better way to do this?
推荐答案
这里发生的事情是当你写这个时:
What is happening here is that when you write this:
controller: 'NemtCtrl'
您告诉 angular 获取名为NemtCtrl"的控制器.但是当你另一方面写这个:
You tell angular to get the controller named 'NemtCtrl'. But when you on the other hand write this:
controller:
function ($stateParams) {
return 'NemtCtrl';
}
您正在为该状态定义控制器.
you are defining a controller for that state.
更新
根据ui-router docs的方法如下:
According to the ui-router docs the way to do is as follows:
$stateProvider.state('contacts', {
template: ...,
controllerProvider: function($stateParams) {
var ctrlName = $stateParams.type + "Controller";
return ctrlName;
}
})
您可以在此处阅读更多相关信息
更新 2
对于您的情况,它类似于:
For your case it would be something like:
.state("dashboard.item.detail", {
url: "/detailId/:detailId/detailName/:detailName",
views: {
'main@': {
templateUrl:
function ($stateParams){
//move this to a util function later
var tempName = unescape($stateParams.detailName);
tempName = tempName.replace(/\s/g, "-");
return '../partials/slides/' + tempName + '.html';
},
resolve: {
DetailData: ['DetailService',
function(DetailService){
return DetailService.getDetails();
}]
},
controllerProvider: //Change to controllerProvider instead of controller
function ($stateParams) {
//console.log( $stateParams.detailName + 'Ctrl');
return $stateParams.detailName + 'Ctrl';
}
}
}
})
这篇关于使用 Angular ui-router 基于状态参数加载控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!