UI-Router $ stateProvider.decorator +动态加载控制器使用'resolve'

时间:2015-05-19 05:36:53

标签: angularjs angular-ui-router

我使用app-config.js中的'resolve'代码段动态加载我的控制器,如下所示,这是有效的;但现在,我想使用$ stateProvider.decorator,所以我不需要在每个州添加相同的代码段。我似乎无法让它发挥作用。有人可以帮助指出问题吗?

以下是不起作用的装饰器:

$stateProvider

           .decorator('data', function(state, parent) {

               var stateData = parent(state);
               var data = stateData.data || {};
               console.log ("State Data = " + JSON.stringify(stateData));
               console.log ("Data = " + JSON.stringify(data));


               var controllerName = (state.name).replace("-", "/");
               console.log ("Controller Name = " + JSON.stringify(controllerName));


               state.resolve = state.resolve || {};

               state.resolve.load = ['$q', '$rootScope', function ($q, $rootScope) {

                 var loadController = '/jbossews-1.0/' + controllerName+ 'Controller.js';
                 console.log ("loadController=" + loadController);

                 var deferred = $q.defer();
                 require([loadController], function () {
                   $rootScope.$apply(function () {
                     deferred.resolve();
                   });
                 });
                 return deferred.promise;
               }]; 

               return stateData;
           })

以下是app-config.js中没有装饰器工作的片段:

.state ('login',  angularAMD.route({
              url: '/Accounts/Login',
              templateUrl: '/jbossews-1.0/Accounts/Login.html',
              resolve: {

                load: ['$q', '$rootScope', function ($q, $rootScope) {

                    var loadController = '/jbossews-1.0/Accounts/LoginController.js';
                    console.log ("loadController=" + loadController);

                    var deferred = $q.defer();
                    require([loadController], function () {
                        $rootScope.$apply(function () {
                            deferred.resolve();
                        });
                    });
                    return deferred.promise;
                }]
              }
            }))

stateName在index.html中显示如下:

<li ng-switch-when="true" ng-click="logout()"><a ui-sref="Accounts-Logout"><span class="glyphicon glyphicon-user"></span>  Logout</a></li>

1 个答案:

答案 0 :(得分:1)

在示例AngularFire-Seed项目中,我看到了以下可能与您的问题相关的注释。

  

不幸的是,装饰者不能在这里使用,因为他们不是   直到.config调用解析后才应用,因此无法使用它们   在路由配置期间,所以我们必须直接将其破解到   $ routeProvider对象

请参阅example codeangular seed project。即使您使用的是ui-router并且演示使用了ngRoute,我相信基础前提将有助于解决您的问题。