AngularJS-如何在状态解析功能中获取状态名称以加载控制器文件? [英] AngularJS - How do I get the state name inside of state resolve function to load controller files?

问题描述

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

I am making head ways into diving into my first complete AngularJS app using PHP and tailored toward an api-centric approach.

我已经达到了这一点:

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

I want to be able to capture the state name inside $stateProvider below for purpose of passing to load function. However I am unable to get $rootScope.statename to be anything but undefined. I have removed this from my solution because I could not get it to help remove undefined from the load function alert statement.

如何捕获(risk或actionitem)作为所需的状态名称，以便能够传递给load函数?

How do I capture (risk or actionitem) as the desired state name to be able to pass to the load function?

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',
        });

     $stateProvider
        .state('action', {
            name: 'action', <----------------------state name I want to capture for this url 
            url: "/actionitems",
            resolve: {
                loadDependencies: ['$ocLazyLoad', '$q', '$rootScope', load]
            },
            templateUrl: '/app/tool/action/ActionItems.html'
     });

      $stateProvider
        .state('risk', {
            name: 'risk',  <----------------------state name I want to capture for this url 
            url: "/risks",
            resolve: {
                loadDependencies: ['$ocLazyLoad', '$q', '$rootScope', load]
            },
            templateUrl: '/app/tool/risk/Risks.html'  
     });
}

推荐答案

我在部分添加了allowed方法，并清理了代码以得到所需的结果.我声明了一个全局状态以捕获$state$.name

I added the allowed method to the resolve section and cleaned up the code to get the desired outcome. I declared a global state to capture the value in $state$.name

var state = '';

//route-config.js
function load($ocLazyLoad, $q)
{
    var deferred = $q.defer();
    try
    {
        $ocLazyLoad.load(state).then(function ()
        {
            deferred.resolve();
        });
    }
    catch (ex)
    {
        deferred.reject(ex);
    }
    return deferred.promise;
}


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

    var res = 
    {
        loadDependencies: ['$ocLazyLoad', '$q', load],
        allowed: function ($state$)
        {
            state = $state$.name;
        }
    };


    $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('action',
        {
            url: "/actionitems",
            resolve: res,
            templateUrl: '/app/tool/action/ActionItems.html'
        });

    $stateProvider
        .state('risk',
        {
            url: "/risks",
            resolve: res,
            templateUrl: '/app/tool/risk/Risks.html'
        });
}

这篇关于AngularJS-如何在状态解析功能中获取状态名称以加载控制器文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！