Having a bit of an issue here, actually, make that four issues, all related (or so I think). Tried using the google, twitter, whatsapp, and facebook API to add share buttons. They come nicely packaged and are easy to implement on the webpage, serving their purpose perfectly.
The problem lies in the fact that these scripts are not designed for angular. From what I gathered, the scripts load and wait for the DOM to be ready before looking for the elements they need to replace – such as divs and buttons. In my case, it looks something like this:
<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>
I suspect that when these scripts scan the DOM, angular hasn't fully loaded the elements, at least most of the time. As a result, the required divs aren't found, the script assumes its task is complete, and angular generates normal links or divs instead. This is my assumption based on some research, like this thread on Google Signin button in AngularJS issues.
I came across an interesting solution in one particular thread – the idea of creating a watcher to monitor changes to the object. So, I added the following snippet to the controller handling that section 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'm not entirely sure if `gapi.share.render` is a valid function of `gapi`, but my current struggle is that the watcher doesn't seem to trigger. My intention was to identify a key function in each of the JavaScript files and have the watcher monitor it, but so far, no success with the above code.
Am I overlooking something obvious here?
Oh, by the way, here's the API I'm utilizing:
<script src="https://apis.google.com/js/platform.js" async defer></script>