Углового пользовательский интерфейс маршрутизатора (дополнительный) триггер события $ stateChangeStart дважды

Question

Может кто-нибудь объяснить мне, почему Angular UI Router Extras дополнение триггера дважды (инициализация!) $stateChangeStart события в случае, когда у меня есть некоторые проверки асинхронного АЯКСА и e.preventDefault() вызова?

Короткий код события Пример:

$rootScope.$on("$stateChangeStart", function (e, toState, toParams, fromState, fromParams, error) { 
     console.log("$stateChangeStart");//fired twice 
     if(!User.data) { 
      e.preventDefault(); 
      $http.get("https://randomuser.me/api/") 
      .success(function(data, status, headers, config) { 
        console.log(data); 
        User.data = data; 
        $state.go(toState, toParams); 
       }); 
     }    
}); 

Full FIDDLE Example

Без статистов капельной все работает, как ожидалось.

TNX

Answer 1

Angularjs имеет несколько проверок во время его переваривания цикл для проверки до и после изменения, это может быть частью этого цикла.

Вы можете видеть это поведение во время $ watch.

$scope.$watch('myVariable', function(change){ 
    if(!change){ return; } 
    // do important things here. 
}); 

В ходе первого раунда дайджест изменений параметра придет как неопределенных, пока MYVARIABLE не установлено где-то в другом месте. После того, как myVariable настроен на одежде, часы $ будут снова стрелять и прорваться через блок if, чтобы выполнить какую-то реальную работу.

Если это относится к вашей функции, возможно, вы можете добавить блок , если, и вернуть его, если один или несколько параметров не определены или какое-либо значение, с которым вы не можете выполнить.

$rootScope.$on("$stateChangeStart", function (e, toState, toParams, fromState, fromParams, error) { 

    if(!e || !toStateForExample || anotherParameter){ return; } 

    console.log("$stateChangeStart");//fired twice 
    if(!User.data) { 
    e.preventDefault(); 
    $http.get("https://randomuser.me/api/") 
    .success(function(data, status, headers, config) { 
     console.log(data); 
     User.data = data; 
     $state.go(toState, toParams); 
    }); 
    }    
});