angular系列彻底的异步解决

   2023-03-08 学习力0
核心提示: Angular 的异步处理的真的很不错。基于消息广播的方式,并且可以向上传递,基本上解决了不同模块,不同controller之间不方便异步的问题。         场景一:通过回调函数进行异步操作(该情况下不用消息广播的机制)        这种情况的特点是

 Angular 的异步处理的真的很不错。基于消息广播的方式,并且可以向上传递,基本上解决了不同模块,不同controller之间不方便异步的问题。

 

        场景一:通过回调函数进行异步操作(该情况下不用消息广播的机制)

        这种情况的特点是直接传递一个回调函数给异步操作就可以了,等异步操作完执行回调。

        比如:controller通过server异步取数据,等取完数据进行一系列的操作,这个时候就可以把操作封装到函数中,传递给异步操作函数。

        controller代码片段举例如下:

[javascript] view plain copy
 
  1. $scope.submit=function(){  
  2.     userService.login($scope.user.loginname.value,$scope.user.password.value,function(data){  
  3.         if(data.success){  
  4.             location.href = '../../views/main/index.html';  
  5.         }else{  
  6.             $scope.user.error.tip=data.msg;  
  7.         }  
  8.     });  
  9. };  

         最后一个参数即为回调函数

 

         server代码片段举例如下:

[javascript] view plain copy
 
  1. return {  
  2.         http:$http,  
  3.     token:'',  
  4.     auth:[],  
  5.     loginname:'',  
  6.     login:function(loginname,password,fn){  
  7.           this.http({  
  8.         url:'../../scripts/loginModule/services/loginOKTest.js',  
  9.         method:'GET'  
  10.           })  
  11.           .success(function(data){  
  12.           if(data[0].success){  
  13.              ...  
  14.                      //调用回调方法  
  15.                      fn(data[0]);  
  16.           }  
  17.            })  
  18.           .error(function(data,header,config,status){  
  19.         alert("验证服务请求失败!");  
  20.           });  
  21.     }  
  22. }  


         场景二:没有传递回调函数的地方,这个时候就必须用到消息广播的机制。

 

         比如:我的controller通过server异步获取数据,这个时候我用回调函数保证取到数据后做后续操作。但是我的后续操作需要通过指令进行DOM的生成。这个时候我们是没有办法直接调用指令的link或者compile的。这个时候我们需要用到广播$scope.$broadcast。发送广播以后,需要通过$scope.$on进行监听。

         controller代码片段举例如下:

 

[javascript] view plain copy
 
  1. //通过categoryService异步取数据  
  2. categoryService.initCategory(loginname,token,function(category){  
  3.         $scope.category=category;  
  4.         $scope.$broadcast("categoryLoaded");  
  5. });  

         service代码片段举例如下:

 

 

[javascript] view plain copy
 
  1. initCategory:function(loginname,token,fn){  
  2.     this.http({  
  3.     url:'../../scripts/mainModule/services/mainCategory.js',  
  4.     method:'GET'  
  5.     }).success(function(data,header,config,status){  
  6.        fn(data);  
  7.         }).error(function(data,header,config,status){  
  8.         alert("验证服务请求失败!");  
  9.     });  
  10. }  

        directive代码片段举例如下:

 

 

[javascript] view plain copy
 
  1. link:function ($scope, $elem, attrs) {  
  2.      $scope.$on("categoryLoaded", function (event, args) {  
  3.             //$scope.category即为异步获取的数据  
  4.      }  
  5. }  


最后,如果我们在这个controller中需要调用另外一个模块的指令的link或者compile或者另一个模块的controller怎么办。我们需要通过依赖注入$rootScope服务,因为他是所有作用域的父,然后调用$emit这个服务进行广播。指令中通过$rootScope.$on进行接收即可。

 

        模块1(app.video)中的controller代码片段举例如下:

[javascript] view plain copy
 
  1. $scope.replay=function(id){  
  2.     console.log("click replay id:"+id);  
  3.     clearReply();  
  4.     //通过$rootScope广播消息给app.dialog模块的controller  
  5.     $rootScope.$emit("openTemplate","reply.html");  
  6. };  


       模块2(app.dialog)中的controller代码片段举例如下:

 

 

[javascript] view plain copy
 
    1. $rootScope.$on('openTemplate',function(event, toState, toParams, fromState, fromParams){  
    2.         $scope.openTemplate(toState);  
    3. });  
    4.           
    5. $scope.openTemplate = function (url) {  
    6.         if(!url)  
    7.            url="/ZVideo-MVC/dialog/defaultTemplate.html";  
    8.         $scope.value = true;  
    9.         ngDialog.open({  
    10.            template: url,  
    11.            className: 'ngdialog-theme-plain',  
    12.            scope: $scope  
    13.         });  
    14. };  
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Angular.js的作用域和数据绑定
    初识Angular.js通过初识Angular.js可以做一个简单的入门,下面开始做深入的了解吧。作用域作用域($scope)和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器
    03-16
  • Angular 4 设置组件样式的几种方式
    Angular 4 设置组件样式的几种方式
      你用Angular吗?一.介绍  如何只改动最简单的css代码,呈现完全不一样的视图效果。第一种:最基本的设置:  图1 代码 图2 界面运行效果图平常,想给一个label或者p等标签添加样式,我们就是这样操作,在Angular中也是一样的。现在,如果我想要将字体换
    03-16
  • angularJSapi学习-angular.copy使用
    angular.copy使用效果:初始状态:输入信息后未保存状态:点击save后状态:当输入框内容和master内容不一致时:点击reset使得user的信息被重置为master中信息: 具体代码: 1 !DOCTYPE HTML 2 html ng-app="app" 3 headscript src="./angular.min.js"/script
    03-16
  • Ionic启动时提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0
    Ionic启动时提示:The Angular CLI requires a m
    在新建ionic项目后通过ionic serve 启动ionic项目时提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0  注:博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与
    03-16
  • Angular.js之内置过滤器学习笔记 javascript过
    !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleangularFilter/titlescript src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"/script/head  body ng-app="angularJS" ng-controller="ctrl"    div{{
    03-08
  • Angular 隨記
    Windows下更新Node 和NPM方法管理員模式打開powershell執行以下命令:Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Forcenpm install -g npm-windows-upgradenpm-windows-upgrade
    03-08
  • 双向数据绑定(angular,vue) 双向数据绑定指令
    最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue.angular众所周知是使用的脏检查($dirty)。一开始大家会认为angular开启了类似setInterval去不停的循环检查,性能极差,但其实并不是,$dirty是在一定条件下才会去执行,比如输入框
    03-08
  • 六、angular 生成二维码
    六、angular 生成二维码
    首先需要安装angular-qrcode :bower install monospaced/angular-qrcodenpm install angular-qrcode如何使用?在相应的需要使用二维码的页面增加如下代码:注意:这里的“version”和"size"可以根据github上面找出自己想要的结果:生成含有图片的二维码:这里
    03-08
  • angular.js简单入门。 angular入门教程
    angular.js简单入门。 angular入门教程
    小弟刚接触angular js  就写了一个简单的入门。后续慢慢补。。。首先看 html 页面。htmlmeta charset="UTF-8"headtitleangularJS/title/headscript type="text/javascript" src="./js/angular.min.js"/script      //引入 angularJSscript type="text/
    03-08
点击排行