Angular UI-Router $ urlRouterProvider。不工作时*不再*

【字号: 日期:2024-02-04浏览:9作者:雯心
如何解决Angular UI-Router $ urlRouterProvider。不工作时*不再*?

编辑:版本0.2.13-重大更改

原始帖子正在使用UI-Router 0.2.12-。0.2.13中的修复程序禁用了此解决方案。请在此处遵循解决方法:

Angular UI-Router $ urlRouterProvider。当我单击时不起作用

原版的:

我发现有一个问题,引起了类似的问题。有一个带有完整代码的有效示例

首先,让我们有两个功能来配置

$urlRouterProvider 和 $stateProvider

这些定义的摘要:

// when config for $urlRouterProvidervar whenConfig = [’$urlRouterProvider’, function($urlRouterProvider) { $urlRouterProvider .when(’/app/list’, [’$state’, ’myService’, function ($state, myService) { $state.go(’app.list.detail’, {id: myService.Params.id}); }]) .otherwise(’/app’);}];// state config for $stateProvidervar stateConfig = [’$stateProvider’, function($stateProvider) { $stateProvider .state(’app’, {url: ’/app’,...}];

有了这个,如果我们这样称呼他们,举报的行为就会停顿:

angular.module(’MyApp’, [ ’ui.router’])// I. firstly the states.config(stateConfig)// II. then the WHEN.config(whenConfig)

上面的调用将不起作用。访问列表时,何时将不会触发详细信息状态。

angular.module(’MyApp’, [ ’ui.router’])// I. firstly WHEN.config(whenConfig) // II. only then call state config.config(stateConfig)

在这里检查。查看 文件…

简介:我们只。只有这样我们才能开始通过填写我们的州$stateProvider。这种方法将导致预期的行为。

解决方法

问: 为什么不能在.when()我的$urlRouterProvider工作了吗?

我选择了一个相当强大的角度应用程序。我一直试图解决的最新问题是“页面刷新时丢失的用户凭据”问题。

当我拿起项目的auth服务时,并没有多大意义,在深入研究后,我发现它是从几页随机代码中组合而成的。它也不能完全正常工作,因此我研究了不同的来源,并决定完全实现其中之一(angular-client-side-auth)

现在,我实现的身份验证服务/控制器与 angular-client-side-auth基本上相同,但是我正在工作的站点使用基于令牌的身份验证。令牌功能基本上已经就位,因此我可以轻松使用它。

在这一点上,我已经使用户保持刷新状态登录,路由正在与它们的身份验证一起使用(以前使用大容量代码来禁用视图中的元素),但是现在$urlRouterProvider.when()s已损坏。他们以前工作得非常好,所以我知道我做过的事情就是要犯错-但我不能简单地撤消已实现的事情!

这是我正在使用的$ urlRouterProvider代码。值得一提的是,我已经包含/需要了.when(),而angular-client-side-auth似乎并没有使用它们。我希望它们可以用该代码实现,但是可能其中有些东西使.when()?的功能无效。我不这么认为。可能还需要澄清,我还没有使用.rule或$httpProvider.interceptors。我尝试使用已实现这些功能的网站,但它们似乎没有什么不同。

$urlRouterProvider .when(’/myState/group’,[’$state’,’myService’,function ($state,myService) { $state.go(’app.myState.group.id’,{id: myService.Params.id}); }]) .otherwise(’/’);

因此,基本上,如果用户或站点将用户定向到/myState/group,则他们实际上应该以状态app.myState.group.id正确的URL结尾?他们没有,但我不知道为什么。关于使用urlRouterProvider的问题并没有太多。

什么 没有 发生?好了,/myState/group加载视图很好,并且在其中<ui-view>是生成的列表id。您可以单击一个ID,该ID会调用一个函数,该函数设置ID然后执行$state.go(’app.myState.group.id’,{id: group.id,std: $scope.std1}); 。当然,该状态将替换用户单击的“生成列表”。

现在,对于.state()…

.state(’app.myState’,{ abstract: true,url: ’/myState’,templateUrl: ’views/myState.html’,data: {access: access.user },controller: ’MyCtrl’,resolve: {// bunch of stuff here,I’ll include it if it’s relevant},redirectMap: {’409’: ’app.error’ }}).state(’app.myState.group’,{ url: ’/group’,templateUrl: ’views/myState.group.html’,data: {access: access.user }}).state(’app.myState.group.id’,{ url: ’/:id’,templateUrl: ’views/myState.group.id.html’,resolve: {’’: function (myService) { myService.stuff.get(false,false,7,0).then(function (data) { });} },controller: ’MygroupidCtrl’})

最后, index.html

<li ng-class='{active: $state.includes(’app.myState’)}'> <a ui-sref='app.myState.group'>My State</a> </li>

不知何故,我觉得有一种更好的方法来构造它。据我所知,app.myState.group实际上并不需要 它 ,它只是嵌套的一部分。

我试图将更ui-sref改为='app.myState.group.id'。如果那没用,我也改成$state.includes(’app.myState’)}了$state.includes(’app.myState.group’)}。不。这可行吗?我知道我必须以某种方式传递ID,但似乎并没有指示。

理想情况下,我想限制不必要状态的数量(以及控制器..以及所有内容)。由于用户应该/myState/group/id在单击链接时直接被带到,因此我认为那应该发生。这不是链接到另一个状态,然后重定向!

就是说,我更关心现在只是使它工作,而以后我会担心清理。

编辑

因此,当我写问题时,我对尝试的事情有了更多的想法。其中之一实际有效!

.state(’app.myState.group’,onEnter: [’$state’,’$timeout’,$timeout,myService) {$timeout(function () { $state.go(’app.myState.group.id’,{id: myService.Params.id})},1000); }]

我喜欢它,尽管我仍然想知道是否还有其他方法可以做到这一点。我也很好奇为什么$ urlRouterProvider停止工作!

相关文章: