AngularJS 重新加载指令模板

Question

我正在编写一个 AngularJS 指令来显示 Twitter 分享按钮，每次属性更改后我都需要重新加载和编译指令模板，因为调用 twttr.widgets.load 后内容将被 iframe 替换包含按钮。

function TwitterShareDirective($twitterRender, debounce, $compile) {
        function template() {
            var element = document.createElement('a');
            element.href = 'https://twitter.com/share';
            element.setAttribute('class', 'twitter-share-button');
            element.setAttribute('data-url', '{{href}}');
            element.setAttribute('data-text', '{{text}}');
            element.setAttribute('data-via', '{{via}}');
            element.setAttribute('data-size', '{{size}}');
            element.setAttribute('data-related', '{{related}}');
            element.setAttribute('data-hashtags', '{{hashtags}}');
            element.setAttribute('data-lang', '{{lang}}');
            return element;
        }
        return {
            restrict: 'E',
            template: template(),
            scope: {
                'href': '@url',
                'size': '@size',
                'text': '@text',
                'via': '@via',
                'related': '@related',
                'hashtags': '@hashtags',
            },
            link: function (scope, element, attr) {
                scope.lang = $twitterRender.getLang();
                var render = function () {
                    var dom = template();
                    element.empty();
                    element.append(dom);
                    $compile(dom)(scope);
                    scope.$apply();
                    $twitterRender.render(element[0]);
                };
                var debouncedRender = debounce(render, 800);
                attr.$observe('url', function () { debouncedRender(); });
                attr.$observe('size', function () { debouncedRender(); });
                attr.$observe('text', function () { debouncedRender(); });
                attr.$observe('via', function () { debouncedRender(); });
                attr.$observe('related', function () { debouncedRender(); });
                attr.$observe('hashtags', function () { debouncedRender(); });
            }
        };
    }

编辑：问题已解决

我使用来自@irth 和 scope.$apply() 的解决方案解决了这个问题

Answer 1

尝试将其包装到 ng-if 指令中。

<div ng-if="doRender">
  <!-- content -->
</div>

// In directive whenever you need a reload

$scope.doRender = false;

// Postpone to end of digest queue

$timeout(function() {
  $scope.doRender = true;
});

Answer 2

在你的渲染函数中尝试这样的事情：

var domElement = document.createElement(newVal);
element.empty();
element.append(domElement);
$compile(domElement)(scope);

如果这不能立即解决问题，请在此处查看我是如何做到的：https://github.com/irthos/ecopos4/blob/master/app/directives/helper.js

Answer 3

在您的渲染函数中调用 $compile 如下：

var render = function () {
              //Here I want to replace contents with new compiled template;
              $compile(element)(scope);
              twttr.widgets.load(element[0]);
            };

AngularJS 重新加载指令模板

AngularJS reload directive template

twitter

angularjs-directive