AngularJS – Как получить имя состояния внутри функции разрешения состояния для загрузки файлов контроллера?

Я делаю все возможное, чтобы погрузиться в свое первое полное приложение AngularJS, использующее PHP и адаптированное к подходу, ориентированному на API.

Я достиг этого момента:

Я хочу иметь возможность зафиксировать имя состояния внутри $stateProvider ниже для передачи функции загрузки. Однако я не могу заставить $rootScope.statename быть чем-то другим, кроме неопределенного. Я удалил это из своего решения, потому что не смог заставить его помочь удалить undefined из оператора предупреждения функции загрузки.

Как мне зафиксировать (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);
}]);

маршрут-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'  
     });
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
527
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

$state.current имеет всю информацию о текущем состоянии, включая имя. Итак, $state.current.name предоставит вам необходимую информацию.

$rootScope.statename остается пустой строкой в ​​методе загрузки после внесения изменений для использования $state.current.name в app.run

Vahe Jabagchourian 08.04.2019 02:29

Просто сделайте код простым:

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

Я добавил allowed: function ($state$){state = $state$.name;} , чтобы установить переменную глобального состояния. Затем я использую переменную состояния загрузки в методе загрузки.

Vahe Jabagchourian 08.04.2019 09:12

Я постараюсь упростить код, но я ценю ответ!

Vahe Jabagchourian 08.04.2019 09:13
Ответ принят как подходящий

Я добавил метод allowed в раздел разрешения и очистил код, чтобы получить желаемый результат. Я объявил глобальное состояние, чтобы зафиксировать значение в $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'
        });
}

Другие вопросы по теме