angularjs使用中国的一些细节

最新推荐文章于 2021-07-12 10:51:15 发布

hjb2722404

最新推荐文章于 2021-07-12 10:51:15 发布

阅读量985

点赞数

分类专栏：前端综合应用

本文链接：https://blog.csdn.net/hjb2722404/article/details/51090490

版权

前端综合应用专栏收录该内容

31 篇文章 5 订阅

订阅专栏

与第三方库的共处

有时我们想要的功能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的对象和方法。

指令内不用再包裹标示符

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


    <li ng-repeat="o in obj">

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

    </li>

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

请牢牢记住：

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

那么，其实上面的示例应该改为：


    <li ng-repeat="o in obj">

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

    </li>

这样就ok了。

hjb2722404

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs使用中国的一些细节

与第三方库的共处有时我们想要的功能angular模块库里并没有提供，而其他第三方库提供了，这时候就需要让angular与第三方库很好的共处。例如，在使用微信支付时，我们需要在页面中引入weixin-js-sdk: <html ng-app='myApp'> <head> ... <script src="http://res.wx.qq.com/open/js/jwei
复制链接

扫一扫

专栏目录