AngularJS 异步解决实现方法


Posted in Javascript onJune 12, 2017

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
canvas实现图像截取功能
Feb 06 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
jquery+css实现侧边导航栏效果
Jun 12 #jQuery
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 #Javascript
Vue非父子组件通信详解
Jun 12 #Javascript
详解angularjs 关于ui-router分层使用
Jun 12 #Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 #Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 #Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 #jQuery
You might like
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP速成大法
2015/01/30 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
教师业务学习制度
2014/01/25 职场文书
高中数学教学反思
2014/01/30 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
五年级语文教学反思
2016/03/03 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL