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实现的分页函数
Feb 07 Javascript
【消息提示组件】,兼容IE6/7&&FF2
Sep 04 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
js中split和replace的用法实例
Feb 28 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
基于vue实现探探滑动组件功能
May 29 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
php对象工厂类完整示例
2018/08/09 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
Django返回json数据用法示例
2016/09/18 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
老生常谈Python基础之字符编码
2017/06/14 Python
审计工作个人的自我评价
2013/12/25 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
《影子》教学反思
2014/02/21 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
幼儿园见习报告
2014/10/30 职场文书
政工师工作总结2015
2015/05/26 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
如何写好活动总结
2019/06/21 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
golang DNS服务器的简单实现操作
2021/04/30 Golang
Mysql事务索引知识汇总
2022/03/17 MySQL