我有以下代码可行：
$stateProvider.state('default',angularAMD.route({
url: '/:module/:action?id',templateUrl: function (params) {
var module = params.module;
var action = module + params.action.charAt(0).toUpperCase()
+ params.action.substr(1);
return 'app/views/' + module + '/' + action + 'View.html';
},controller: 'userController',}));
但是,我无法找到一种动态解析控制器名称的方法.我尝试使用如here所述的解决方案,但ui-router似乎处理的解决方式与angular-route不同.
有什么指针吗？
编辑：我已经尝试过使用controllerProvider,但它对我不起作用(例如,下面的代码只返回一个硬编码的控制器名称来测试它是否真的有效)：
controllerProvider: function () {
return 'userController';
}
给我以下错误：
Error: [ng:areq] Argument ‘userController’ is not a function,got undefined
http://errors.angularjs.org/1.3.3/ng/areq?p0=userController&p1=not%20aNaNunction%2C%20got%20undefined
解
我们需要UI-Router的两个功能：
>解决(加载缺少的js代码片段)
> controllerProvider(参见下面文档中的引用)
angularAMD – main.js定义
这将是我们的main.js,其中包含智能转换controllerName – controllerPath：
require.config({
//baseUrl: "js/scripts",baseUrl: "",// alias libraries paths
paths: {
"angular": "angular","ui-router": "angular-ui-router","angularAMD": "angularAMD","DefaultCtrl": "Controller_Default","OtherCtrl": "Controller_Other",},shim: {
"angularAMD": ["angular"],"ui-router": ["angular"],deps: ['app']
});
控制器：
// Controller_Default.js
define(['app'],function (app) {
app.controller('DefaultCtrl',function ($scope) {
$scope.title = "from default";
});
});
// Controller_Other.js
define(['app'],function (app) {
app.controller('OtherCtrl',function ($scope) {
$scope.title = "from other";
});
});
app.js
首先,我们需要一些将param(例如id)转换为控制器名称的方法.为了我们的测试目的,让我们使用这个天真的实现：
var controllerNameByParams = function($stateParams)
{
// naive example of dynamic controller name mining
// from incoming state params
var controller = "OtherCtrl";
if ($stateParams.id === 1) {
controller = "DefaultCtrl";
}
return controller;
}
.州()
这最终将是我们的州定义
$stateProvider
.state("default",angularAMD.route({
url: "/{id:int}",templateProvider: function($stateParams)
{
if ($stateParams.id === 1)
{
return "<div>ONE - Hallo {{title}}</div>";
}
return "<div>TWO - Hallo {{title}}</div>";
},resolve: {
loadController: ['$q','$stateParams',function ($q,$stateParams)
{
// get the controller name === here as a path to Controller_Name.js
// which is set in main.js path {}
var controllerName = controllerNameByParams($stateParams);
var deferred = $q.defer();
require([controllerName],function () { deferred.resolve(); });
return deferred.promise;
}]
},controllerProvider: function ($stateParams)
{
// get the controller name === here as a dynamic controller Name
var controllerName = controllerNameByParams($stateParams);
return controllerName;
},}));
在这里查看,在working example
如此处所述：$stateProvider,对于状态(name,stateConfig),我们可以使用controller和controllerProvider.一些摘自文档：
controllerProvider
…
controller(可选)stringfunction
Controller fn that should be associated with newly related scope or the name of a registered controller if passed as a string. Optionally,the ControllerAs may be declared here.
controller: "MyRegisteredController"
controller:
"MyRegisteredController as fooCtrl"}
controller: function($scope,MyService) {
$scope.data = MyService.getData(); }
controllerProvider(可选)功能
Injectable provider function that returns the actual controller or string.
controllerProvider:
function(MyResolveData) {
if (MyResolveData.foo)
return "FooCtrl"
else if (MyResolveData.bar)
return "BarCtrl";
else return function($scope) {
$scope.baz = "Qux";
}
}
…
解析(可选)对象
An optional
map<string,function>of dependencies which should be injected into the controller. If any of these dependencies are promises,the router will wait for them ALL to be resolved before the controller is instantiated…
即让我们使用controllerProvider：
… to resolve the controller name dynamically…
如果你设法到达这里,也许你想用RequireJS – angular-ui-router with requirejs,lazy loading of controller检查另一个类似的解决方案
