Question

有人可以解释为什么添加Angular UI Router Extras 如果我有一些异步ajax检查和$stateChangeStart调用，则触发两次（在init！上）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.
});

在第一轮摘要中更改参数将以 undefined 的形式出现，直到 myVariable 设置在其他位置。一旦 myVariable 设置为else-wear，$ watch将再次触发并突破if块以进行一些实际操作。

如果你的函数是这种情况，也许你可以添加一个 if 块，如果你的一个或多个参数未定义，或者你没有执行某些值，则返回。< / p>

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

Angular ui router（extras）$ stateChangeStart事件触发两次

1 个答案: