AngularJS 中的 Whatsapp 共享答案

【问题标题】：Whatsapp Sharing in AngularJSAngularJS 中的 Whatsapp 共享
【发布时间】：2015-10-15 22:11:33
【问题描述】：

应该很简单，但由于此代码无法检测到 AngularJS 代码，因此无法正常工作。

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

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

【问题讨论】：

标签： angularjs angularjs-directive anchor href whatsapp

【解决方案1】：

你需要在你的 config 角度阶段内清理锚点 href，这将允许你的 href 带有 whatsapp 前缀。

代码

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

详情请看SO Question。

【讨论】：

@user3362364 你能看看我的答案吗？
对此感到抱歉。我测试了它并没有用。期待更多的人发表评论，时间过去了。我在 app.js 中添加了您的代码并以分号结尾，但它无法处理以下错误（我是新手）：ReferenceError: $compileProvider is not defined。 PS：我的 angularJS 家伙又请假约 10 天
请注意，如果我直接添加诸如domain.com 之类的链接而不是 {{FullURL}}
@user3362364 尝试更新..在配置函数中添加$compileProvider
@user3362364 很高兴听到这个消息..谢谢:)

【解决方案2】：

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

aHrefSanitizationWhitelist([regexp]); 检索或覆盖在 [href] 清理期间用于将安全 url 列入白名单的默认正则表达式。清理是一项旨在防止通过 html 链接进行 XSS 攻击的安全措施。任何即将通过数据绑定分配给 a[href] 的 url 首先被规范化并转换为绝对 url。之后，将 url 与 aHrefSanitizationWhitelist 正则表达式进行匹配。如果找到匹配项，则将原始 url 写入 dom。否则，绝对 url 以 'unsafe:' 字符串为前缀，然后才将其写入 DOM。 “如果找到匹配项，则将原始 url 写入 dom。否则，绝对 url 以 'unsafe:' 字符串为前缀，然后才将其写入 DOM。” 因此，对于除whatsapp 以外的所有其他网址，将找不到匹配项并且会被标记为不安全

另一种是制作指令的方式

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>

【讨论】：

【解决方案3】：

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

这是最简单的过程...

干杯。?

【讨论】：