Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs使用中国的一些细节大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

与第三方库的共处

有时我们想要的功能angular模块库里并没有提供,而其他第三方库提供了,这时候就需要让angular与第三方库很好的共处。

例如,在使用微信支付时,我们需要在页面中引入weixin-js-sdk:

<html ng-app='myApp'>
    <head>
    ...
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  </head>
    ...

然后我们需要将第三方库的调用初始化一下:

angular
    .module('static')
    .run(runBlock);

  /** @ngInject */
  function runBlock($http,wtConfig,toastr){
      var url = wtConfig.apiHost +"/api/getSignature?url="+LOCATIOn.origin + LOCATIOn.pathname;
      $http.get(url)
          .then(function(res){
              wx.config({
                  debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                  appId: res.data.appId,// 必填,公众号的唯一标识
                  timestamp: res.data.timestamp,// 必填,生成签名的时间戳
                  nonceStr: res.data.nonceStr,// 必填,生成签名的随机
                  signature: res.data.signature,// 必填,签名,见附录1
                  jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
              });
          })
          .catch(function(res){
              toastr.error(res.data.msg);
              return false;
          });
  }

然后,在服务(service)�或工厂(factory)中调用

 /*微信支付*/ function wxPay(payData){ var url = wtConfig.apiHost + wtConfig.wxPayUrl; var data = payData; return $http.post(url,data) .then(wxPayCompletE) .catch(wxPayFailed); function wxPayComplete(res){ res = res.data; wx.chooseWXPay({ timestamp: res.timestamp,// 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timestamp字段名需大写其中的S字符 nonceStr: res.nonceStr,// 支付签名随机串,不长于 32 位 package: res.package,// 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***) signType: res.signType,// 签名方式,认为'SHA1',使用新版支付需传入'MD5' paySign: res.paySign,// 支付签名 success: function (resp) { if(resp){ window.LOCATIOn.hash = '#/msg'; } } }); } function wxPayFailed(res){ toastr.error("error:"+res); } } 

这里有一个坑,请注意上面第22行代码,这里我为什么没有使用angular自带的$LOCATIOn对象来做页面跳转呢?

原因是,此处的suceess方法是属于第三方库的,它不在angular的作用域之内,所以此处不可使用angular的对象和方法。@H_772_145@

指令内不用再包裹标示符

开始学习使用angular的同学可能会遇到这样的问题:

 <li ng-repeat="o in obj"> <a ng-href="javascript:;" ng-click="show({{o.id}})">{{o.text}}</a> </li> 

然后我们会发现此处的a标签然绑定来点击事件用来执行show()方法,但是我们点击却发现没有任何动作并且控制台会报错。

请牢牢记住:

ng为前缀的内置指令中本身就是js表达式了,千万不要再包裹标示符@H_772_145@

那么,其实上面的示例应该改为:

 <li ng-repeat="o in obj"> <a ng-href="javascript:;" ng-click="show(o.id)">{{o.text}}</a> </li> 

这样就OK了。

大佬总结

以上是大佬教程为你收集整理的angularjs使用中国的一些细节全部内容,希望文章能够帮你解决angularjs使用中国的一些细节所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。