我正在尝试基于stateparam加载控制器以使其可重用
.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)
controller: 'NemtCtrl'
但是如果我这样做将无法正常工作:
controller: function ($stateParams) {
return 'NemtCtrl';
}
我在这里做错了什么?有一个更好的方法吗?
这里发生的是当您编写此代码时:
controller: 'NemtCtrl'
您告诉angular获取名为“ NemtCtrl”的控制器。但是,另一方面,您可以这样写:
controller:
function ($stateParams) {
return 'NemtCtrl';
}
您正在为该状态定义一个控制器。
更新
根据ui-router文档,该方法如下:
$stateProvider.state('contacts', {
template: ...,
controllerProvider: function($stateParams) {
var ctrlName = $stateParams.type + "Controller";
return ctrlName;
}
})
您可以在此处了解更多信息
更新2
对于您的情况,它将类似于:
.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';
}
}
}
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句