AngularJS 中的 Whatsapp 分享

Question

虽然应该很简单，但它不会工作，因为此代码无法检测 AngularJS 个代码。

    <a href="whatsapp://send?text={{challenge.challenge_title}}" 
            data-action="{{FullURL}}">Whatsapp</a>

我需要一个指令吗？如果是，那是什么？有经验的AngularJS，请帮忙

Answer 1

您需要在 angular 的 config 阶段清理锚点 href，这将允许您的 href 带有 whatsapp 前缀。

代码

app.config(function($compileProvider){
   //other configuration code here
   $compileProvider.aHrefSanitizationWhitelist(/^\s*(whatsapp):/);
})

查看此了解详情。

Answer 2

我在使用 $compileProvider.aHrefSanitizationWhitelist(/^\s*(whatsapp):/) 后遇到了不安全问题 URL;当我阅读 angular 文档时，它说：

aHrefSanitizationWhitelist([regexp]); 检索或覆盖用于在 [href] 清理期间将安全 url 列入白名单的默认正则表达式。清理是一种安全措施，旨在防止通过 html 链接进行 XSS 攻击。任何要通过数据绑定分配给 a[href] 的 url 首先被规范化并变成绝对值 url。之后，url 与 aHrefSanitizationWhitelist 正则表达式进行匹配。如果找到匹配项，则将原始 url 写入 dom。否则，绝对 url 以 'unsafe:' 字符串为前缀，然后才写入 DOM。 "If a match is found, the original url is written into the dom. Otherwise, the absolute url is prefixed with 'unsafe:' string and only then is it written into the DOM." 因此对于除 whatsapp 以外的所有其他 urls，将找不到匹配项它将被标记为不安全

另一种是指令的方式

angular.module('shareLink')
  .directive('whatsApp', function (){
    return{
        link: function (scope, elem, $attr){
            elem.on('click', function (){
                var text = $attr.text;
                var url = $attr.whatsApp;
                var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
                var whatsapp_url = "whatsapp://send?text=" + message;
                window.location.href = whatsapp_url;

            });
        }
    }
});

<a class="sharelink whatsapp"  data-action="share/whatsapp/share" data-text="you can add title or any text here" whats-app="{{url}}">
                        <i class="fa fa-whatsapp "></i> WHATSAPP
                    </a>

Answer 3

<a href="https://api.whatsapp.com/send?text={{Your desired Text}}" data-action="share/whatsapp/share" class="share-btn whatsapp" >Share on Whatsapp</a>

这是最简单的过程...

干杯。

AngularJS 中的 Whatsapp 分享

Whatsapp Sharing in AngularJS

anchor

href

angularjs

whatsapp

angularjs-directive