angular.js ui-route 如何在 reject 之后捕获 route 或 url 或 params？

Question

我想捕获 url 参数或路由或当状态被拒绝时：

定义状态

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;
};

and 运行 for init catch error reject

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

如果我的 url 是 /categories?param=1¶mtwo=2 我想要这个 url 当验证继续这个 url

how cath this url? on event reject

Answer 1

我们可以使用$location service. There is 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]);

This method is getter / setter.
Return url (e.g. /path?a=b#hash) when called without any parameter.
Change path, search and hash, when called with parameter and return $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&amp;para2=y
/rejected/other

勾选demo here

Answer 2

我有几点建议：

首先，看一下ui-router documentation for state change events。
使用观察者的参数获取状态 URL 和参数。
在观察器中使用 error 参数来检查不同的错误。
修复您对 deferred.reject()

1。获取 URL 和参数

您不需要使用 $location。
由于您使用的是 ui-router，因此您可以通过 toState.url 和 toParams.

2。在 `$stateChangeError`

中使用 error 参数

您可以像这样向 $stateChangeError 事件观察器添加一个 error 参数：

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

如文档所述，

It's important to note that if you have any errors in your resolve functions (javascript errors, non-existent services, etc) they will not throw traditionally. You must listen for this $stateChangeError event to catch ALL errors. Use event.preventDefault() to prevent the $UrlRouter from reverting the URL to the previous valid location (in case of a URL navigation).

3。调用 `deferred.reject()`

更重要的是，你在$timeout(deferred.reject);中对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);
  }
});

angular.js ui-route 如何在 reject 之后捕获 route 或 url 或 params？

angular.js ui-route how catch route or url or params after reject?

angularjs

angular-ui-router

1。获取 URL 和参数

2。在 `$stateChangeError`

3。调用 `deferred.reject()`

4。范例

angular.js ui-route 如何在 reject 之后捕获 route 或 url 或 params？

angular.js ui-route how catch route or url or params after reject?

angularjs

angular-ui-router

1。获取 URL 和参数

2。在 $stateChangeError

3。调用 deferred.reject()

4。范例

2。在 `$stateChangeError`

3。调用 `deferred.reject()`