I am in the process of creating a custom Twitter share button directive that dynamically updates based on the parent model.
app.directive('twitterShare', function() {
return {
restrict: 'A',
template: "<a href=\"https://twitter.com/share\" data-count=\"none\" class=\"twitter-share-button\" data-text=\"{{text}}\" data-lang=\"pt-BR\"></a>",
scope: {
text: '=twitterShare'
},
link: function($scope, $element, $attrs, $model) {
return $scope.$watch('text', function(value) {
//??
});
}
};
});
and the directive
<div twitter-share="scopeModel"></div>
The $scope.text correctly displays my $scope.scopeModel, but when Twitter replaces the a element with an iframe, the original element is lost. How can I recreate/redraw it when it changes while also implementing some kind of throttle to avoid expensive iframe recreation.
I attempted a modification:
app.directive('twitterShare', function($compile, $timeout) {
return {
restrict: 'A',
scope: {
text: '=twitterShare'
},
link: function($scope, element) {
var $element;
$element = "<a href=\"https://twitter.com/share\" data-count=\"none\" class=\"twitter-share-button\" data-text=\"{{text}}\" data-lang=\"pt-BR\"></a>";
$scope.$watch('text', function(value) {
if (value != null) {
$timeout(function() {
element.html($compile($element)($scope));
typeof twttr !== "undefined" && twttr !== null ? twttr.widgets.load() : void 0;
});
}
});
}
};
});
However, on subsequent model changes watched by $watch, the {{text}} placeholder does not update. Additionally, each time the scopeModel changes, the $$watchers object continues increasing.