0

So got a problem, actually, I have four problems, but they are all the same issue (or so I think). Decided to use google, twitter, whatsapp and facebook API to do share buttons. Both comes nicely packaged and available from facebook and google, makes a simple but nice button on the webpage, and does the trick.

Problem is that these scripts are not written for angular, and reading up on the issue, I think what is happening is that the scripts loads and wait for the DOM, then tries to find its "triggers", i.e. divs and buttons its suppose to replace. In my case the following:

<a href="whatsapp://send" data-text="Unbrand: the webpage you need" data-href="http://unbrand.me/share/whatapp" class="wa_btn wa_btn_s" style="display:none; margin-bottom: 8px;">Share</a>
            <a href="https://twitter.com/share" style="margin-bottom: 8px;" class="twitter-share-button" data-url="http://unbrand.me/share/twitter" data-text="UnBrand - Tailored clothes just for you" data-mobile-iframe="true" data-via="unbrand_me" data-related="unbrand_me" data-hashtags="unbrand_me">Tweet</a>
            <div class="fb-share-button" style="margin-bottom: 8px;" data-href="http://unbrand.me/share/facebook" data-layout="button_count" data-mobile-iframe="true"></div>
            <div class="g-plus" style="margin-bottom: 8px;" data-action="share" data-annotation="bubble" data-href="http://unbrand.me/share/google"></div>
        </md-fab-actions>

Problem is (or I think it is) that when they scan the DOM, angular haven't loaded this DOM, or at least not four out of five times, so the divs are never found, the script think its done, and angular makes a normal link or div. I could be wrong, but reading this (and other issues) this seems to be the way.Google Signin button in AngularJS sometimes does not show up

There was a solution on this one thread that was really interesting, the option of creating a watcher to watch for a change to the object, so added the following to the controller for that part of the page:

  $scope.$watch('gapi', function(newValue,oldVale){
        if(newValue !== oldVale){
            if(gapi){
                console.log("GAPI loaded")
                gapi.share.render('shareButton',
                    {
                        'onsuccess': $scope.onSuccess,
                        'onfailure': $scope.onFailure,
                        'scope':'https://www.googleapis.com/auth/plus.login'
                    }
                );
            }
        }
    });

I do not know if gapi.share.render is a function of gapi, but for now my issue is that the watcher never renders. My idea was that I would identify a key function in each of the java scripts and get the watcher to look for it. But I can't get the above function to work.

Am I missing something obvious?

Oh, the API I am using 

<script src="https://apis.google.com/js/platform.js" async defer></script>
Community
  • 1
  • 1
vrghost
  • 1,084
  • 2
  • 19
  • 42

1 Answers1

0

==================== This one did not work once on the internet, only worked on my test machine =====================

OK, so this may not be the best option ever, but it does work, or at least better than previously, I load the scripts as angular start in a .run. As I said, it does work, may not be pretty though :)

Oh, and it loads facebook, twitter, google and whatsapp api, remove as you see fit

   .run(['$rootScope', '$window',
        function($rootScope, $window) {

            $rootScope.user = {};

            $window.fbAsyncInit = function() {
                // Executed when the SDK is loaded

                FB.init({

                    /*
                     The app id of the web app;
                     To register a new app visit Facebook App Dashboard
                     ( https://developers.facebook.com/apps/ )
                     */

                    appId: 'WOULDN't YOU LIKE TO KNOW',

                    /*
                     Adding a Channel File improves the performance
                     of the javascript SDK, by addressing issues
                     with cross-domain communication in certain browsers.
                     */

                    channelUrl: 'app/channel.html',

                    /*
                     Set if you want to check the authentication status
                     at the start up of the app
                     */

                    status: true,

                    /*
                     Enable cookies to allow the server to access
                     the session
                     */

                    cookie: true,

                    /* Parse XFBML */

                    xfbml: true
                });

            };

            (function(d){
                // load the Facebook javascript SDK

                var js,
                    id = 'facebook-jssdk',
                    ref = d.getElementsByTagName('script')[0];

                if (d.getElementById(id)) {
                    return;
                }

                js = d.createElement('script');
                js.id = id;
                js.async = true;
                js.src = "//connect.facebook.net/en_US/all.js";

                ref.parentNode.insertBefore(js, ref);

            }(document));
            !function(d,s,id){
                var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
                if(!d.getElementById(id)){js=d.createElement(s);
                    js.id=id;
                    js.src=p+'://platform.twitter.com/widgets.js';
                    fjs.parentNode.insertBefore(js,fjs);
                }}(document, 'script', 'twitter-wjs');

            !function(d,s,id){
                var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
                if(!d.getElementById(id)){js=d.createElement(s);
                    js.id=id;
                    js.src='https://apis.google.com/js/platform.js';
                    fjs.parentNode.insertBefore(js,fjs);
                }}(document, 'script', 'gapi-wjs');
            if(typeof wabtn4fg==="undefined") {
                wabtn4fg=1;
                h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");
                s.type="text/javascript";
                s.src="http://unbrand.me/bower_components/whatsapp-sharing/dist/whatsapp-button.js";
                h.appendChild(s)}

        }])
vrghost
  • 1,084
  • 2
  • 19
  • 42