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

问题

I want to capture the url params or route or when the state is rejected:

define state

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

define resolve event , default reject

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

return deferred.promise;
};

and run for init catch error reject

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

if my url is eg /categories?param=1&paramtwo=2 i want cacth this url for when validate continue this url

how cath this url? on event reject

回答1:

I have a few suggestions:

• First, take a look at the ui-router documentation for state change events.
• Get the state URL and params using the arguments of the watcher.
• Use the error argument in your watcher to check for different errors.
• Fix your call to deferred.reject()

---

1. Getting the URL and parameters

• You don't need to use $location.
• Since you're using ui-router, you can get them with toState.url and toParams.

---

2. Using the error argument in $stateChangeError

You can add an error argument to the $stateChangeError event watcher like so:

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

As the documentation says,

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. Calling deferred.reject()

• More importantly, your call to deferred.reject in $timeout(deferred.reject); is not a function call.
• It should be deferred.reject() - (don't forget the parenthesis)

---

4. Example

Here is an example that rejects the promise after one second with the error 'TEST_ERROR'. The watcher logs that error, the intended state url, and it's params when the error is fired.

The resolve:

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

The watcher:

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

回答2:

We can use $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())
    });

}])

The doc cite:

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"

The working demo shows that state defined as:

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

when navigated like this:

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

will log into console

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

Check the demo here

来源：https://stackoverflow.com/questions/28778015/angular-js-ui-route-how-catch-route-or-url-or-params-after-reject