AngularJS-如何在状态解析功能中获取状态名称以加载控制器文件？

Question

我正在逐步探索使用PHP的第一个完整AngularJS应用程序，并针对以api为中心的方法进行了量身定制。

我已经达到了这一点：

我希望能够在下面的$ stateProvider中捕获状态名称，以便传递给加载功能。但是，我无法使$ rootScope.statename变为未定义状态。我已将其从解决方案中删除，因为我无法获取它来帮助从加载功能警报语句中删除未定义的内容。

如何捕获（risk或actionitem）为所需的状态名称才能传递给load函数？

app.js-删除了代码段

app.run( ['$rootScope', '$state', '$stateParams',

                      function ($rootScope,   $state,   $stateParams) {

                           $rootScope.statename = $state.current; 

}]);

app.js

angular.module('Action', ['datatables', 'datatables.scroller', 'ngResource']);          

angular.module('Risk',   ['datatables', 'datatables.scroller', 'ngResource']);          

var app = angular.module('Main', ['ui.router', 'oc.lazyLoad', 'datatables', 'ngResource', 'Action', 'Risk']);

app.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider', function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider){

    configRoutes($stateProvider, $urlRouterProvider, $ocLazyLoadProvider);

}]);

route-config.js

function load ($ocLazyLoad, $q, $rootScope){

    var deferred = $q.defer();

    try{

        $ocLazyLoad.load($rootScope.statename).then(function(){

            deferred.resolve();

        });

    }

    catch (ex){

        deferred.reject(ex);

    }

    return deferred.promise;

}

function configRoutes($stateProvider, $urlRouterProvider, $ocLazyLoadProvider)

{

    $urlRouterProvider

        .when('action', 'action')

        .when('issue',  'issue')

        .when('lesson', 'lesson')

        .when('opportunity', 'opporutnity')

        .when('risk', 'risk')

        .otherwise('main');

    $ocLazyLoadProvider.config({

        modules: 

        [{

            name: 'action',

            files: ['app/tool/action/ActionController.js']

        },

        {

            name: 'risk',

            files: ['app/tool/risk/RiskController.js']

        }]

    });

    $stateProvider

        .state('main', {

            url: "/main",

            //templateUrl: '/app/tool/home/home.html',

        });

Answer 1

只需保持简单的代码即可：&nbsp;$stateProvider&nbsp; &nbsp; .state('action', {&nbsp; &nbsp; &nbsp; &nbsp; name: 'action', //<--state name I want to capture for this url&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; url: "/actionitems",&nbsp; &nbsp; &nbsp; &nbsp; resolve: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loadDependencies: function($ocLazyLoad) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return $ocLazyLoad.load("action");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; templateUrl: '/app/tool/action/ActionItems.html'&nbsp;});

Answer 2

我将allowed方法添加到了resolve部分，并清理了代码以得到所需的结果。我声明了一个全局状态以获取其中的价值$state$.namevar state = '';//route-config.jsfunction load($ocLazyLoad, $q){&nbsp; &nbsp; var deferred = $q.defer();&nbsp; &nbsp; try&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; $ocLazyLoad.load(state).then(function ()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; deferred.resolve();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; catch (ex)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; deferred.reject(ex);&nbsp; &nbsp; }&nbsp; &nbsp; return deferred.promise;}function configRoutes($stateProvider, $urlRouterProvider, $ocLazyLoadProvider){&nbsp; &nbsp; var res =&nbsp;&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; loadDependencies: ['$ocLazyLoad', '$q', load],&nbsp; &nbsp; &nbsp; &nbsp; allowed: function ($state$)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; state = $state$.name;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; &nbsp; $urlRouterProvider&nbsp; &nbsp; &nbsp; &nbsp; .when('action', 'action')&nbsp; &nbsp; &nbsp; &nbsp; .when('issue', 'issue')&nbsp; &nbsp; &nbsp; &nbsp; .when('lesson', 'lesson')&nbsp; &nbsp; &nbsp; &nbsp; .when('opportunity', 'opporutnity')&nbsp; &nbsp; &nbsp; &nbsp; .when('risk', 'risk')&nbsp; &nbsp; &nbsp; &nbsp; .otherwise('main');&nbsp; &nbsp; $ocLazyLoadProvider.config(&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; modules: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'action',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; files: ['app/tool/action/ActionController.js']&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'risk',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; files: ['app/tool/risk/RiskController.js']&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; });&nbsp; &nbsp; $stateProvider&nbsp; &nbsp; &nbsp; &nbsp;.state('action',&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "/actionitems",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve: res,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; templateUrl: '/app/tool/action/ActionItems.html'&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; $stateProvider&nbsp; &nbsp; &nbsp; &nbsp; .state('risk',&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "/risks",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve: res,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; templateUrl: '/app/tool/risk/Risks.html'&nbsp; &nbsp; &nbsp; &nbsp; });}