angularjs – AngularAMD ui-router动态控制器名称？

我正在尝试在我的应用程序中编写一个通用路由,并根据路径参数动态解析视图和控制器名称.

我有以下代码可行：

$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

这是 working plunker的链接.

解

我们需要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检查另一个类似的解决方案

angularjs – AngularAMD ui-router动态控制器名称？

猜你在找的Angularjs相关文章