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

Question

问题: 为什么 .when() 不会在我的 $urlRouterProvider还要上类吗？

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

当我拿起这个项目的 auth 服务时并没有多大意义，在仔细研究之后我了解到它是由几页随机代码组合在一起的。它也没有完全工作，所以我研究了不同的来源并决定完全实现其中之一(angular-client-side-auth)

现在，我实现的身份验证服务/ Controller 基本上与 angular-client-side-auth 中的相同，但是我工作的站点使用基于 token 的身份验证。 token 功能已经基本到位，因此我可以轻松使用它。

此时，我已经让用户在刷新时保持登录状态，路由与他们的身份验证一起工作(之前使用笨重的代码来禁用 View 中的元素)但是，现在 $urlRouterProvider .when()坏了。他们之前工作得非常好，所以我知道我所做的事情是错误的 - 但我不能简单地撤消我已经实现的事情!

所以这是我正在使用的 $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 的函数，然后执行 $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，但它似乎甚至都不是直接的。

理想情况下，我想限制不必要的状态(和 Controller ……以及所有东西)的数量。由于用户应该被直接带到 /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="...">

原创:

我发现有一个问题导致了类似的问题。有 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 填充我们的状态。这种方法将导致预期的行为。