Angular UI-Router $ urlRouterProvider.当不工作*时*

Question

问题: 为什么不再.when()在我的$urlRouterProvider工作中？

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

当我拿起它时,项目的auth服务没有多大意义,在挖掘之后我知道它是从几个随机页面的代码中组合而成的.它也没有完全工作,所以我调查了不同的来源并决定完全实现其中一个(angular-client-side-auth)

现在,我实现的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,他们实际上应该最终在url状态app.myState.group.id对吗？他们不是,我无法弄清楚为什么.关于使用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',
            data: {
                access: access.user
            },
            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', {
            url: '/group',
            templateUrl: 'views/myState.group.html',
            data: {
                access: access.user
            },
            onEnter: ['$state', '$timeout', 'myService', function ($state, $timeout, myService) {
                $timeout(function () {
                     $state.go('app.myState.group.id', {id: myService.Params.id})
                }, 1000);
            }]

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

Answer 1

编辑:版本0.2.13 - 打破变化

最初的帖子正在使用UI-Router 0.2.12-.0.2.13中的修复程序禁用此解决方案.请按照此处的解决方法:

Angular UI-Router $ urlRouterProvider.当我点击<a ui-sref="...">时不工作

原版的:

我发现,有一个问题导致了类似的问题.有一个完整代码的工作示例

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

• $urlRouterProvider 和
• $stateProvider

这些定义的片段:

// when config for $urlRouterProvider
var 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 $stateProvider
var stateConfig = ['$stateProvider', function($stateProvider) {

  $stateProvider
    .state('app', {
        url: '/app',
        ...
}];

有了这个,如果我们将这样称呼他们,报告的行为将是hapen:

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)

检查它在这里.看app.js文件......

总结:我们只需要先配置$urlRouterProvider.只有这样,我们才能开始通过填写我们的州$stateProvider.这种方法将导致预期的行为.