如何从 ui-router statechange 返回 $state.current.name
Posted
技术标签:
【中文标题】如何从 ui-router statechange 返回 $state.current.name【英文标题】:how do return the $state.current.name from ui-router statechange 【发布时间】:2014-09-13 18:38:59 【问题描述】:当我改变角度位置时,我想返回.state('name')
。
从我的run()
可以返回$state
对象:
.run(function($rootScope, Analytics, $location, $stateParams, $state)
console.log($state);
但是当我尝试获取$state.current
时,它是空对象
.run(function($rootScope, $location, $stateParams, $state)
console.log($state.current);
配置示例:
.config(function($stateProvider, $urlRouterProvider, AnalyticsProvider)
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',
url: '/',
views:
'':
templateUrl: 'views/main.html',
controller: 'MainCtrl'
,
'navigation@home':
templateUrl: 'views/partials/navigation.html',
controller: 'NavigationCtrl'
,
'weekly@home':
templateUrl: 'views/partials/weekly.html',
controller: 'WeeklyCtrl'
,
'sidepanel@home':
templateUrl: 'views/partials/side-panel.html',
controller: 'SidePanelCtrl'
,
'shoppanel@home':
templateUrl: 'views/partials/shop-panel.html',
controller: 'ShopPanelCtrl'
,
'footer@home':
templateUrl: 'views/partials/footer.html',
controller: 'FooterCtrl'
)
【问题讨论】:
【参考方案1】:您可以监听“$stateChangeSuccess”并相应地设置状态。比如——
$rootScope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams)
$state.current = toState;
)
【讨论】:
您能否解释一下为什么问题中的代码不起作用? 已被弃用;你现在需要使用 IHookRegistry @danm07 angular-ui.github.io/ui-router/feature-1.0/interfaces/… 这个 sn-p 将在页面加载时显示每个状态的名称... $rootScope.$on('$stateChangeSuccess', function() alert($state.current.名称););【参考方案2】:作为 Sandeep 解决方案的替代方案,您也可以这样做:
angular.module('yourApp').run(['$rootScope', '$state',
function ($rootScope, $state)
$rootScope.$state = $state;
]);
这样做,它只会被设置一次,而不是在每个 stateChange。基本上,您只需在某处存储对 $state 的引用 - 我选择 $rootScope 只是为了让这个示例保持简单。
现在在我的代码中我可以很容易地引用它:
<div ng-show="$state.includes('accounting.dashboard')"></div>
和
<div>Current State: $state.current.name</div>
我通常也存储 $stateParams,因此我有更多关于状态的信息(但我没有在这个例子中使用它)。
【讨论】:
你的意思是:它只设置一次,而不是每次 stateChange? 因为run()
在所有 Angular 模块加载完成后只被框架调用一次。这使它成为一劳永逸地设置快捷方式对象$rootScope.$state = $state;
之类的完美位置。另一方面,$rootScope.$on('$stateChangeSuccess') ...
是每次状态更改时调用的事件处理程序。【参考方案3】:
你也可以试试。
.controller('yourApp', function($scope,$state)
$scope.state = $state;
现在您可以在控制台中登录了。
console.log($state);
它应该返回您当前所处的状态。
或者您可以像这样在 html 视图中调用范围。
state.current.name
它也会返回你所处的状态。
【讨论】:
【参考方案4】:如果你想在控制器中控制你的状态,那么你应该这样控制:
console.log($state.current.name);
如果你想在视图中控制它,那么:
在控制器中:
$scope.state = $state.current.name;
在模板中:这样打印
state
【讨论】:
以上是关于如何从 ui-router statechange 返回 $state.current.name的主要内容,如果未能解决你的问题,请参考以下文章
Angular ui-router - 如何访问从父模板传递的嵌套命名视图中的参数?
如何使用 AngularJS 的 ui-router 提取查询参数?
如何将自定义数据从ui-router中的视图传递到某个状态?