AngularJS - 如何在状态解析函数中获取状态名称以加载控制器文件?
AngularJS - How do I get the state name inside of state resolve function to load controller files?
我正在使用 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);
}]);
路线-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'
});
}
$state.current
包含有关当前状态的所有信息,包括名称。所以 $state.current.name
将为您提供所需的信息。
保持代码简单:
$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
方法添加到解析部分并清理代码以获得所需的结果。我声明了一个全局状态来捕获 $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'
});
}
我正在使用 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);
}]);
路线-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'
});
}
$state.current
包含有关当前状态的所有信息,包括名称。所以 $state.current.name
将为您提供所需的信息。
保持代码简单:
$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
方法添加到解析部分并清理代码以获得所需的结果。我声明了一个全局状态来捕获 $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'
});
}