Description, Title and URL from Ajax Requests

[marloncarvalho]

There's a problem with the actual implementation of each embedded directive (twitter, facebook, etc). The actual implementation doesn't allow me to set values coming from an ajax request into url, description and title attributes. To clarify the problem, assume I have this HTML fragment:

<ul ng-social-buttons
  data-description="description"
  data-title="title"
  data-url="url"
  data-image="imageUrl">
  <li>Share:</li>
  <li class="ng-social-twitter" data-title="twitterText" data-url="twitterUrl">Twitter</li>

Now, consider the code below is somewhere inside the controller for the HTML fragment provided above:

Service.load(someId, function(data) {
    $scope.twitterTitle = data.title;
    $scope.twitterDescription = data.description;
    $scope.twitterUrl = data.url; 
});

In that case, Twitter directive (for example) will rely on the values coming from the parent directive instead of using the values from this ajax call. Taking a look at the code, I figured out what the problem is. For example, somewhere in 02-facebook.js and inside the link function, we have:

 options.urlOptions = {
      url: $parse(attrs.url)(scope)
 };

 scope.options = options;
 scope.ctrl = ctrl;
 ctrl.init(scope, element, options);

But when the link function is called, my ajax call is still being processed and these values aren't available yet. To overcome this problem, you should use the scope two way binding feature for each attribute and use scope.watchGroup to wait until the values are set in these variables.

I'm gonna create a pull request with this implementation and send it to you soon.