AngularJS 重新加载指令模板答案

【问题标题】：AngularJS reload directive templateAngularJS 重新加载指令模板
【发布时间】：2015-05-26 19:32:11
【问题描述】：

我正在编写一个 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() 的解决方案解决了这个问题

【问题讨论】：

标签： twitter angularjs-directive

【解决方案1】：

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

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

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

【讨论】：

我尝试了您的解决方案，但它会呈现一个带有未编译 html 的 twitter 按钮（但 $compile 返回函数的输出返回一个已编译的 html 与我的范围）

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

尝试将其包装到 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;
});

【讨论】：

添加 $timeout 不起作用，除非我确实为 $timeout 添加了一些时间。像这样-$timeout(function() { $scope.doRender = true; },500);有什么办法可以避免$timeout的时间加成。