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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
简单的js表单验证函数
Oct 28 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
js如何打印object对象
Oct 16 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
JS代码优化的8点建议
Feb 04 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
Smarty模板快速入门
2007/01/04 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
介绍Python中内置的itertools模块
2015/04/29 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
Python学习入门之区块链详解
2017/07/25 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Python调用Windows命令打印文件
2020/02/07 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
python遍历路径破解表单的示例
2020/11/21 Python
Python tkinter实现日期选择器
2021/02/22 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
园艺师求职信
2014/03/10 职场文书
好的促销活动方案
2014/08/21 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
学校中秋节活动总结
2015/03/23 职场文书
免职通知
2015/04/23 职场文书
基石观后感
2015/06/12 职场文书
暑期家教宣传单
2015/07/14 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Go语言带缓冲的通道实现
2021/04/26 Golang