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

Question

问题： 为什么我的.when()工作中的$urlRouterProvider为何不胜？

我已经选择了一款相当强大的角度应用。我一直试图解决的最新问题是，在页面刷新时丢失了用户凭据＆＃39;问题。

当我拿起它时，项目的授权服务没有多大意义，在挖掘之后，我知道它是从几个随机的代码页面组合而成的。它也没有完全发挥作用，所以我查看了不同的来源并决定完全实现其中一个（angular-client-side-auth）

现在，我实施的身份验证服务/控制器基本上与 angular-client-side-auth 中的内容相同，但是网站我是＆＃m; working使用基于令牌的身份验证令牌功能已基本实现，所以我没有遇到任何麻烦。

此时，我已经让用户在刷新时保持登录状态，路由正在使用他们的身份验证（以前使用庞大的代码来禁用视图中的元素）但是，现在$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的网址吗？他们不是，但我无法弄清楚原因。关于使用urlRouterProvider的问题，没有太多问题。

发生什么？好的/myState/group视图加载正常，其中<ui-view>是id生成的列表。您可以单击一个ID，该ID调用一个设置ID的功能，然后执行$state.go('app.myState.group.id', {id: group.id, std: $scope.std1});该状态当然会替换生成的列表＆＃39;用户点击了。

现在，对于.state()＆＃39;

.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')}。不。这可行吗？我知道我必须以某种方式传递身份证，但它似乎并不是在指导。

理想情况下，我想限制不必要的状态（以及控制器......和所有内容）的数量。由于用户可能会在点击链接时被直接带到/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 .when not working when I click <a ui-sref="...">

ORIGINAL：

我发现有一个问题导致了类似的问题。 a working example有完整代码

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

• $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',
        ...
}];

如果我们将这样称呼它们，那么报告的行为将会成为现实：

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)

检查here。请参阅 app.js 文件...

摘要：我们只需首先配置$urlRouterProvider 。只有这样，我们才能开始通过$stateProvider填写我们的州。这种方法将导致预期的行为。