angular.js ui-route如何在拒绝后捕获路由或url或params？

Question

我想捕获网址参数或路线，或者当州被拒绝时：

定义状态

app.config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('categories', {
  url: '/categories',
  templateUrl: 'categories/views/index.html',
  resolve: {
   loadRoute: app.loadRoute
  }
 });
}
]);

定义解决事件，默认拒绝

app.loadRoute = function ($q, $timeout) {
var deferred = $q.defer();
$timeout(deferred.reject);

return deferred.promise;
};

并运行init catch错误拒绝

app.run(['$rootScope', function($rootScope) {
 $rootScope.$on('$stateChangeError',
  function(event, toState, toParams, fromState, fromParams) {       
//.....
  });
}]);

如果我的网址是 / categories？param = 1＆amp; paramtwo = 2 我希望cacth此网址为验证时继续此网址

  

这个网址如何影响？ 关于拒绝事件

Answer 1

我有一些建议：

• 首先，请查看ui-router documentation for state change events。
• 使用观察者的参数获取状态URL和参数。
• 使用观察程序中的error参数检查不同的错误。
• 将您的来电修改为deferred.reject()

---

1。获取URL和参数

• 您无需使用$location。
• 由于您使用的是ui-router，因此可以使用toState.url和toParams来获取它们。

---

2。使用error

中的$stateChangeError参数

您可以向$ stateChangeError事件观察器添加error参数，如下所示：

$rootScope.$on('$stateChangeError', 
function(event, toState, toParams, fromState, fromParams, error){ ... })

正如文件所说，

  

重要的是要注意，如果您的resolve functions（javascript错误，不存在的服务等）中有任何错误，他们将不会传统抛出。您必须侦听此$ stateChangeError事件以捕获所有错误。使用event.preventDefault()可阻止$ UrlRouter将URL恢复为之前的有效位置（如果是网址导航）。

---

3。致电deferred.reject()

• 更重要的是，您在deferred.reject中对$timeout(deferred.reject);的来电不是函数调用。
• 应该是deferred.reject() - （不要忘记括号）

---

4。实施例

这是一个使用错误'TEST_ERROR'在一秒钟后拒绝承诺的示例。观察者记录该错误，预期的状态URL，以及触发错误时的参数。

决心：

  resolve: {
    errorObj: function($q, $timeout) {
      var deferred = $q.defer();
      $timeout(function() {
        deferred.reject("TEST_ERROR");
      }, 1000);
      return deferred.promise;
    }
  }

守望者：

$rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
  event.preventDefault();
  if (error === "TEST_ERROR") {
    console.log("ERROR:", error, "URL:", toState.url, "PARAMS:", toParams);
  }
});

Answer 2

我们可以使用$location服务。有a working demo

.run(['$rootScope', '$state', '$location',

  function ($rootScope, $state, $location) {
    $rootScope.$on('$stateChangeError', 

    function(event, toState, toParams, fromState, fromParams){
      console.log($location.url())
    });

}])

文件引用：

  

<强> url([url]);

     

此方法是getter / setter   在没有任何参数的情况下调用时返回url（例如/ path？a = b #hash）   使用参数调用时返回路径，搜索和哈希，并返回$ location。

// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var url = $location.url();
// => "/some/path?foo=bar&baz=xoxo"

工作演示显示状态定义为：

  .state('rejected', {
      url: "/rejected{any:.*}",
      templateUrl: 'tpl.html',
      resolve: {
        loadRoute: ['Loader', function(Loader){
          return Load.load()
        }]
      }
  })

像这样导航时：

<a href="#/rejected?par1=x&amp;para2=y">
<a href="#/rejected/other">

将登录到控制台

/rejected?par1=x&para2=y
/rejected/other

检查demo here