用ui路由器公开当前的州名
mot*_*dev 48 javascript angularjs angular-ui-router angular-translate
我正在尝试实现一个语言切换器,如果用户点击"en"侧的任何给定页面上的"de" - 它会将它们带到"de"侧的那个页面.如果我在console.dir中使用$ state参数,它会使用给定$ state的"current"属性公开我想要的值.如果我尝试使用console.dir $ state.current来关注我想要的值,它只给出父状态属性(我当前的视图是嵌套的).
我当前的想法是,我在url/en/content,然后动态地我可以让我的lang导航动态地将适当的目标点加载到某种数据属性中,用我自己启动的自定义指令选择那些"转到"并根据angular-translate设置我的首选语言值.
目前的关键问题是暴露那个$ state name - 再次,当简单地浏览$ state时,当前对象给出了我想要的值,但$ current.state直接只给出了父状态.
如果有人有更好的建议如何做到这一点(以一种有角度的方式 - 没有自定义cookie垃圾)我很乐意接受建议.
谢谢!
更新!代码示例:
我的州的对象参考:
var urlStates = {
en: {
home: {
name: 'home',
url: '/en',
templateUrl: 'templates/'+lang+'/home.html',
abstract: 'true'
},
home_highlights: {
name:'home.highlights',
url: '',
templateUrl: 'templates/'+lang+'/home.highlights.html'
},
home_social:
{
name: 'home.social',
url: '/social',
templateUrl: 'templates/'+lang+'/home.social.html'
},
home_map:
{
name: 'home.map',
url: '/map',
templateUrl: 'templates/'+lang+'/home.map.html'
}
};
我的国家:
$stateProvider
.state(urlStates.en.home)
.state(urlStates.en.home_highlights)
.state(urlStates.en.home_social)
.state(urlStates.en.home_map);
$locationProvider.html5Mode(true);
})
控制器:
.controller('LandingPage', function($translate, $state){
this.state = $state;
this.greeting = "Hello";
});
最后,我在dom中看到的输出:
使用this.state = $ state;
{
"params": {},
"current": {
"name": "home.highlights",
"url": "",
"templateUrl": "templates/en/home.highlights.html" },
"transition": null
}
使用this.state = $ state.current
{
"name": "",
"url": "^",
"views": null,
"abstract": true
}
rnr*_*ies 80
这就是我的方式
JAVASCRIPT:
var module = angular.module('yourModuleName', ['ui.router']);
module.run( ['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
HTML:
<pre id="uiRouterInfo">
$state = {{$state.current.name}}
$stateParams = {{$stateParams}}
$state full url = {{ $state.$current.url.source }}
</pre>
例
http://plnkr.co/edit/LGMZnj?p=preview
- @Angelin如果您需要在任何需要的地方明确地注入它,那么"已经全局可用"的XD就不是了. (3认同)
- @ChanandlerBong使其在任何范围内全局可用. (2认同)
- 通过在需要的地方注入它已经全球可用.无需使用$ rootScope. (2认同)
以这种格式回答你的问题非常具有挑战性.
另一方面,你询问导航,然后关于当前$state表演的所有奇怪.
对于第一个我会说这是太宽泛的问题而且对于第二个我会说......好吧,你做错了什么或者错过了明显的问题:)
拿以下控制器:
app.controller('MainCtrl', function($scope, $state) {
$scope.state = $state;
});
在哪里app配置为:
app.config(function($stateProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'main.html',
controller: 'MainCtrl'
})
.state('main.thiscontent', {
url: '/thiscontent',
templateUrl: 'this.html',
controller: 'ThisCtrl'
})
.state('main.thatcontent', {
url: '/thatcontent',
templateUrl: 'that.html'
});
});
然后是简单的HTML模板
<div>
{{ state | json }}
</div>
将"打印出来"例如以下内容
{
"params": {},
"current": {
"url": "/thatcontent",
"templateUrl": "that.html",
"name": "main.thatcontent"
},
"transition": null
}
我举了一个显示这个的小例子,使用ui.router和pascalprecht.translate菜单.我希望你发现它很有用,并弄清楚你做错了什么.
Plunker在这里http://plnkr.co/edit/XIW4ZE
撷取画面
- "你做错了什么或错过了明显的事情" - 从我的问题状态中得到了非常明智的推论.:)我想在这里搞清楚这一点.我正在用一些代码示例更新我的答案.问题是,当我将$ state对象传递给前端时 - 我发现我理想的值存在于$ state.current.name中 - 如果我尝试访问它,比如说,用$将该特定值发送到前端state.value.name我得到父状态的名称而不是嵌套状态.但是 - 足够的谈话,再见上面的一些代码.:) (2认同)
在我当前的项目中，解决方案如下所示：
我创建了一个抽象的语言状态
$stateProvider.state('language', {
abstract: true,
url: '/:language',
template: '<div ui-view class="lang-{{language}}"></div>'
});
项目中的每个状态都必须依赖于这个状态
$stateProvider.state('language.dashboard', {
url: '/dashboard'
//....
});
语言切换按钮调用自定义函数：
<a ng-click="footer.setLanguage('de')">de</a>
相应的函数看起来像这样（当然在控制器内部）：
this.setLanguage = function(lang) {
FooterLog.log('switch to language', lang);
$state.go($state.current, { language: lang }, {
location: true,
reload: true,
inherit: true
}).then(function() {
FooterLog.log('transition successfull');
});
};
这有效，但有一个更好的解决方案，只需从 html 更改状态参数中的值：
<a ui-sref="{ language: 'de' }">de</a>
不幸的是这不起作用，请参阅https://github.com/angular-ui/ui-router/issues/1031