javascript - AngularJS - ui.router - 如何在动态添加后重定向到所需状态？

Question

我正在尝试根据该问题的答案将状态动态添加到我的应用程序中: AngularJS - UI-router - How to configure dynamic views

app.run(['$q', '$rootScope', '$state', '$http',
  function ($q, $rootScope, $state, $http) 
  {
    $http.get("myJson.json")
    .success(function(data)
    {
      angular.forEach(data, function (value, key) 
      { 
          var state = {
            "url": value.url,
            "parent" : value.parent,
            "abstract": value.abstract,
            "views": {}
          };

          // here we configure the views
          angular.forEach(value.views, function (view) 
          {
            state.views[view.name] = {
              templateUrl : view.templateUrl,
            };
          });

          $stateProviderRef.state(value.name, state);
      });
      $state.go("home");    
    });
}]);

然而，我像接受答案的最后一条评论中的那个人一样被困住了，状态已经创建，但我需要将用户重定向到正确的状态，而不是简单地将他们重定向到家，我无法得到 $state.current.

现在我正在解析所有可用状态并尝试找到与当前 url 的匹配项，如果找到匹配项我将它们重定向到它。我看到一个我不记得在哪里的人，他是这样做的。

除了抽象状态外，它工作正常。这是代码:

  var matchedState = null,
    matchedStateParams = null;

  angular.forEach($state.get(), function(state) {
    var url = state.url ? $urlMatcherFactory.compile(state.url) : null;
    var params = url ? url.exec($location.path(), $location.search()) : null;
    if (!matchedState && params && !state.abstract) {
      matchedState = state;
      matchedStateParams = params;
    }
  });

  if(matchedState != null) {
    $state.transitionTo(matchedState, matchedStateParams, {reload: true});
  }

您是否知道一种更好的方法来实现这一点并且即使在抽象状态下也能正常工作？

非常感谢您的回答!

Answer 1

答案也显示在这个Q & A - 我们的助手将有两种方法:

• 提供者 - $urlRouterProvider.deferIntercept();
• 服务 - $urlRouter.listen();

如文档中所述(请参阅下面引用的部分)我们可以使用 UI-Router 的强大功能在配置阶段“停止 url 评估”并在运行阶段“重新运行它”，一旦所有状态都被动态定义。 ..

这将是.config()阶段的部分

.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {

      $stateProviderRef = $stateProvider; 
       
      // here we will define default
      // and instract UI-Router to wait and wait and wait
      $urlRouterProvider.otherwise('/home');
      $urlRouterProvider.deferIntercept();

这是.run()阶段

.run(['$rootScope', '$urlRouter',
  function($rootScope, $urlRouter) {    

    $stateProviderRef
      .state('home', {
        url: "/home",
        templateUrl: 'tpl.html',
      })

    // now we will stop the waiting
    // the url evaluation will start again, and even dynamic stuff
    // will be properly triggered
    $urlRouter.listen();
  }
]);

检查 this workig plunker

此解决方案的文档在这里

$urlRouterProvider

The deferIntercept(defer)

Disables (or enables) deferring location change interception.

If you wish to customize the behavior of syncing the URL (for example, if you wish to defer a transition but maintain the current URL), call this method at configuration time. Then, at run time, call $urlRouter.listen() after you have configured your own $locationChangeSuccess event handler.

引用片段:

var app = angular.module('app', ['ui.router.router']);

app.config(function($urlRouterProvider) {

  // Prevent $urlRouter from automatically intercepting URL changes;
  // this allows you to configure custom behavior in between
  // location changes and route synchronization:
  $urlRouterProvider.deferIntercept();

}).run(function($rootScope, $urlRouter, UserService) {

  $rootScope.$on('$locationChangeSuccess', function(e) {
    // UserService is an example service for managing user state
    if (UserService.isLoggedIn()) return;

    // Prevent $urlRouter's default handler from firing
    e.preventDefault();

    UserService.handleLogin().then(function() {
      // Once the user has logged in, sync the current URL
      // to the router:
      $urlRouter.sync();
    });
  });

  // Configures $urlRouter's listener *after* your custom listener
  $urlRouter.listen();
});