AngularJS如何實現異步

小編給大家分享一下AngularJS如何實現異步，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

AngularJS 異步解決實現方法

Angular 的異步處理的真的很不錯。基于消息廣播的方式，并且可以向上傳遞，基本上解決了不同模塊，不同controller之間不方便異步的問題。

        場景一：通過回調函數進行異步操作(該情況下不用消息廣播的機制)

        這種情況的特點是直接傳遞一個回調函數給異步操作就可以了，等異步操作完執行回調。

        比如：controller通過server異步取數據，等取完數據進行一系列的操作，這個時候就可以把操作封裝到函數中，傳遞給異步操作函數。

        controller代碼片段舉例如下：

$scope.submit=function(){ 
  userService.login($scope.user.loginname.value,$scope.user.password.value,function(data){ 
    if(data.success){ 
      location.href = '../../views/main/index.html'; 
    }else{ 
      $scope.user.error.tip=data.msg; 
    } 
  }); 
};

         最后一個參數即為回調函數

         server代碼片段舉例如下：

return { 
    http:$http, 
  token:'', 
  auth:[], 
  loginname:'', 
  login:function(loginname,password,fn){ 
     this.http({ 
    url:'../../scripts/loginModule/services/loginOKTest.js', 
    method:'GET' 
     }) 
     .success(function(data){ 
     if(data[0].success){ 
       ... 
           //調用回調方法 
           fn(data[0]); 
     } 
      }) 
     .error(function(data,header,config,status){ 
    alert("驗證服務請求失敗！"); 
     }); 
  } 
}

         場景二：沒有傳遞回調函數的地方，這個時候就必須用到消息廣播的機制。

         比如：我的controller通過server異步獲取數據，這個時候我用回調函數保證取到數據后做后續操作。但是我的后續操作需要通過指令進行DOM的生成。這個時候我們是沒有辦法直接調用指令的link或者compile的。這個時候我們需要用到廣播$scope.$broadcast。發送廣播以后，需要通過$scope.$on進行監聽。

         controller代碼片段舉例如下：

//通過categoryService異步取數據 
categoryService.initCategory(loginname,token,function(category){ 
    $scope.category=category; 
    $scope.$broadcast("categoryLoaded"); 
});

         service代碼片段舉例如下：

initCategory:function(loginname,token,fn){ 
  this.http({ 
  url:'../../scripts/mainModule/services/mainCategory.js', 
  method:'GET' 
  }).success(function(data,header,config,status){ 
    fn(data); 
    }).error(function(data,header,config,status){ 
    alert("驗證服務請求失敗！"); 
  }); 
}

         directive代碼片段舉例如下：

 link:function ($scope, $elem, attrs) { 
   $scope.$on("categoryLoaded", function (event, args) { 
      //$scope.category即為異步獲取的數據 
   } 
}

最后，如果我們在這個controller中需要調用另外一個模塊的指令的link或者compile或者另一個模塊的controller怎么辦。我們需要通過依賴注入$rootScope服務，因為他是所有作用域的父，然后調用$emit這個服務進行廣播。指令中通過$rootScope.$on進行接收即可。

        模塊1(app.video)中的controller代碼片段舉例如下：

$scope.replay=function(id){ 
  console.log("click replay id:"+id); 
  clearReply(); 
  //通過$rootScope廣播消息給app.dialog模塊的controller 
  $rootScope.$emit("openTemplate","reply.html"); 
};

       模塊2(app.dialog)中的controller代碼片段舉例如下：

$rootScope.$on('openTemplate',function(event, toState, toParams, fromState, fromParams){ 
    $scope.openTemplate(toState); 
}); 
     
$scope.openTemplate = function (url) { 
    if(!url) 
      url="/ZVideo-MVC/dialog/defaultTemplate.html"; 
    $scope.value = true; 
    ngDialog.open({ 
      template: url, 
      className: 'ngdialog-theme-plain', 
      scope: $scope 
    }); 
};

以上是“AngularJS如何實現異步”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！