Within my Angular (1.3) application, I have a list of records being displayed using ng-repeat. The template includes a directive that contains ShareThis controls from ShareThis, which are activated once the DOM is loaded.
Upon the initial load of the app, the ShareThis Javascript functions correctly and activates the buttons. However, when there is a route change, the activation does not occur. I have come across references to manually activate the controls using stButtons.makeButtons() or stButtons.locateElements();. But I am uncertain about where to call this function in the directive or page cycle. I've tried placing it within:
- the directive link function - utilizing
$timeoutorscope.$watch - the template
- activates before model binding<script>stButtons.locateElements();</script> - the controller after binding - activates before DOM rendering
I understand that the activation function needs to be called after binding and after DOM rendering, but Angular does not provide an indication for when the DOM is ready. There is a method to dynamically render the ShareThis controls using only Javascript, but I prefer having the HTML defined in the template rather than in Javascript for this particular case.
Despite encountering various related questions on this issue, none of the answers seem to fully resolve the problem in my scenario, especially considering the changes introduced in Angular 1.3.
item-list.html (view)
<div ng-repeat="item in vm.itemList">
<item-directive item="item"></item-directive>
</div>
item-list.cs (controller)
{ ... vm.itemList = getItems(...) ... }
item-directive.js (directive)
(function () {
angular.module('app');
function itemDirective() {
var directive = { templateUrl: 'item.html', link: linkFunc, controller: ItemDirective };
return directive;
function linkFunc(scope, element, attr, ctrl) { var item = scope.item }
}
ItemDirective.$inject = ['$scope'];
function ItemDirective($scope) { ... }
}
item.html (directive template)
...
<div class="item-share-section">
<span class='st_sharethis_large' st_url="{{vm.item.url}}" st_title="{{vm.item.name}}"></span>
</div>
...