指令为ShareThis渲染DOM后调用Javascript

Question

在Angular（1.3）应用程序中，我正在使用ng-repeat显示记录列表。 ng-repeat内部有一个带有模板的指令。 在模板中，我使用的是ShareThis控件，该控件在加载DOM之后被激活。

首次加载应用程序时，ShareThis Javascript可以正常工作并激活按钮。 在路线更改时，它不会激活。 我已经找到了通过stButtons.makeButtons()或stButtons.locateElements();手动激活控件的参考stButtons.locateElements(); ，但是我不确定在指令或页面周期中在何处调用此函数。 我已经尝试过：

1. 指令链接功能-使用$timeout或scope.$watch
2. 模板<script>stButtons.locateElements();</script> - 在模型绑定之前激活
3. 绑定后的控制器- 在呈现DOM之前激活

我的理解是激活功能需要在绑定后和 DOM渲染后调用，但是Angular不知道DOM准备就绪的时间。 有一种方法可以仅使用Javascript动态呈现ShareThis控件，但是在这种情况下，我希望模板中定义的HTML不是Javascript。

我已经看到了几个相关的问题，但是对于我的情况，似乎没有一个答案能100％地起作用（并且从Angular 1.3开始，很多答案都已失效）。

item-list.html （查看）

<div ng-repeat="item in vm.itemList">
    <item-directive item="item"></item-directive>
</div>

item-list.cs （控制器）

{ ... vm.itemList = getItems(...) ... }

item-directive.js （指令）

(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 （指令模板）

...
<div class="item-share-section">
    <span class='st_sharethis_large' st_url="{{vm.item.url}}" st_title="{{vm.item.name}}"></span>
</div>
...

Answer 1

如果我很了解，您想在dom完全渲染后调用该函数，对吗？ 在您的指令的postLink中尝试以下操作：

$scope.$watch('viewContentLoaded', stButtons.locateElements())

Answer 2

尽管我的解决方案有点破旧，但我仍然喜欢使用$ watch，因为这样效率不高。 取而代之的是，我初始化了一个函数，该函数在呈现您要用来加载按钮的特定视图时加载按钮。 该技术如下：

这是应该放在控制器中的函数：

  $scope.loadShareThis = function() {
    stButtons.makeButtons();
  }

然后，您将像这样添加到item-list.html中：

<div ng-repeat="item in vm.itemList" ng-init="loadShareThis()">
    <item-directive item="item"></item-directive>
</div>

动态URL可能会给您带来其他问题，但这又是另一个问题。