Whatsapp Sharing in AngularJS

Question

Simple as it should be, it won't work as this code can't detect AngularJS codes.

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

Do i need a directive for this? If yes, what is it? Someone with experience in AngularJS, kindly help.

score 10 · Accepted Answer · edited May 23 '17 at 11:54

10

You need to sanitize anchor href inside your config phase of angular, that will allow your href with whatsapp prefix.

Code

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

Look this SO Question for details.

edited May 23 '17 at 11:54

Community

1
1

answered Jul 25 '15 at 07:30

Pankaj Parkar

134,766
23
234
299

@user3362364 could you look at mine answer? – Pankaj Parkar Jul 25 '15 at 18:34
Sorry about this. I tested and it didn't work. Was expecting more people to comment and time went by. I added your code in app.js and ended it with a semi-colon but it didn't work with the following error (i'm a newbie): ReferenceError: $compileProvider is not defined. PS: My angularJS guy is on leave for another ~10 days – user3362364 Jul 28 '15 at 04:52
Please note that it works perfectly if i directly add link such as http://domain.com/ instead of the {{FullURL}} – user3362364 Jul 28 '15 at 04:56
@user3362364 Do try updated..add `$compileProvider` in config function – Pankaj Parkar Jul 28 '15 at 05:35
@user3362364 Glad to hear that..Thanks :) – Pankaj Parkar Jul 28 '15 at 06:27
@Pankhaj Parkar This adds "unsafe" on all my ui-sref. Any thoughts? – user3362364 Jul 29 '15 at 10:12
@user3362364 did you added this config block in your app? After adding this you would not get `unsafe:` thing prefix with href ..I think you should use `ng-href` for the different domain `URL` – Pankaj Parkar Jul 29 '15 at 10:37
I added this in app.js but still getting the error. I have to define state and so use ui-sref. Any way out? – user3362364 Jul 29 '15 at 10:59
could you update you question with more details please? – Pankaj Parkar Jul 29 '15 at 11:03

Harendra · Answer 2 · 2017-03-10T04:18:36.850

I faced an issue of unsafe URL after using $compileProvider.aHrefSanitizationWhitelist(/^\s*(whatsapp):/); when i read the angular docs it says:

aHrefSanitizationWhitelist([regexp]); Retrieves or overrides the default regular expression that is used for whitelisting of safe urls during a[href] sanitization. The sanitization is a security measure aimed at preventing XSS attacks via html links. Any url about to be assigned to a[href] via data-binding is first normalized and turned into an absolute url. Afterwards, the url is matched against the aHrefSanitizationWhitelist regular expression. 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. "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." So for all other urls other than whatsapp, the match will not be found and it will be marked as unsafe

The another is way to make a directive

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>

Debojyoti Sarkar · Answer 3 · 2020-03-20T07:01:20.840

0

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

This is the most easiest process...

Cheers.

edited Mar 20 '20 at 07:01

answered Mar 20 '20 at 06:59

Debojyoti Sarkar

21
4

Whatsapp Sharing in AngularJS

3 Answers3

Linked