AngularJS 異步解決實(shí)現(xiàn)方法

更新時(shí)間：2017年06月12日 14:43:41 投稿：lqh

這篇文章主要介紹了AngularJS 異步解決實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下

AngularJS 異步解決實(shí)現(xiàn)方法

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

場(chǎng)景一：通過回調(diào)函數(shù)進(jìn)行異步操作(該情況下不用消息廣播的機(jī)制)

這種情況的特點(diǎn)是直接傳遞一個(gè)回調(diào)函數(shù)給異步操作就可以了，等異步操作完執(zhí)行回調(diào)。

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

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

最后一個(gè)參數(shù)即為回調(diào)函數(shù)

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){ 
       ... 
           //調(diào)用回調(diào)方法 
           fn(data[0]); 
     } 
      }) 
     .error(function(data,header,config,status){ 
    alert("驗(yàn)證服務(wù)請(qǐng)求失??！"); 
     }); 
  } 
}

場(chǎng)景二：沒有傳遞回調(diào)函數(shù)的地方，這個(gè)時(shí)候就必須用到消息廣播的機(jī)制。

比如：我的controller通過server異步獲取數(shù)據(jù)，這個(gè)時(shí)候我用回調(diào)函數(shù)保證取到數(shù)據(jù)后做后續(xù)操作。但是我的后續(xù)操作需要通過指令進(jìn)行DOM的生成。這個(gè)時(shí)候我們是沒有辦法直接調(diào)用指令的link或者compile的。這個(gè)時(shí)候我們需要用到廣播$scope.$broadcast。發(fā)送廣播以后，需要通過$scope.$on進(jìn)行監(jiān)聽。

controller代碼片段舉例如下：

//通過categoryService異步取數(shù)據(jù) 
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("驗(yàn)證服務(wù)請(qǐng)求失??！"); 
  }); 
}

directive代碼片段舉例如下：

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

最后，如果我們?cè)谶@個(gè)controller中需要調(diào)用另外一個(gè)模塊的指令的link或者compile或者另一個(gè)模塊的controller怎么辦。我們需要通過依賴注入$rootScope服務(wù)，因?yàn)樗撬凶饔糜虻母?，然后調(diào)用$emit這個(gè)服務(wù)進(jìn)行廣播。指令中通過$rootScope.$on進(jìn)行接收即可。

模塊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 
    }); 
};

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: