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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
Mootools 1.2教程 函数
Sep 15 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
js计算精度问题小结
Apr 22 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
BootStrap selectpicker
Jun 20 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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小偷相关截取函数备忘
2010/11/28 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python版本的仿windows计划任务工具
2018/04/30 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
详解Python用户登录接口的方法
2019/04/17 Python
Python对列表的操作知识点详解
2019/08/20 Python
python爬虫添加请求头代码实例
2019/12/28 Python
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
销售副总经理岗位职责
2013/12/11 职场文书
高三地理教学反思
2014/01/11 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
婚育证明格式
2015/06/17 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
详解Python中的进程和线程
2021/06/23 Python
vue+echarts实现多条折线图
2022/03/21 Vue.js