Twitter AngularJS重新加载指令模板

我正在编写一个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（）使magic

尝试将其包装成

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;
});

//在指令中，当您需要重新加载时
$scope.doRender=false；
//推迟到摘要队列的末尾
$timeout（函数（）{
$scope.doRender=true；
});

尝试将其包装成

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;
});

//在指令中，当您需要重新加载时
$scope.doRender=false；
//推迟到摘要队列的末尾
$timeout（函数（）{
$scope.doRender=true；
});

尝试将其包装成

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;
});

//在指令中，当您需要重新加载时
$scope.doRender=false；
//推迟到摘要队列的末尾
$timeout（函数（）{
$scope.doRender=true；
});

尝试将其包装成

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;
});

//在指令中，当您需要重新加载时
$scope.doRender=false；
//推迟到摘要队列的末尾
$timeout（函数（）{
$scope.doRender=true；
});

在渲染函数中尝试以下操作：

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

---

如果这还不能达到开箱即用的效果，请看我在这里是如何做到的：

在渲染函数中尝试类似的操作：

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

---

如果这还不能达到开箱即用的效果，请看我在这里是如何做到的：

在渲染函数中尝试类似的操作：

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

---

如果这还不能达到开箱即用的效果，请看我在这里是如何做到的：

在渲染函数中尝试类似的操作：

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

---

如果这还不能达到开箱即用的效果，请看我是如何做到的：

在渲染函数中调用$compile，如下所示：

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

---

在渲染函数中调用$compile，如下所示：

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

---

在渲染函数中调用$compile，如下所示：

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

---

在渲染函数中调用$compile，如下所示：

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

---

我尝试了您的解决方案，但它将呈现一个带有未编译html的twitter按钮（但$compile返回函数的输出返回带有我的作用域的已编译html）。我尝试了您的解决方案，但它将呈现带有未编译html的twitter按钮（但$compile返回函数的输出返回带有我的作用域的已编译html）我尝试了您的解决方案，但它将呈现一个带有未编译html的twitter按钮（但$compile返回函数的输出返回带有我的作用域的已编译html）。我尝试了您的解决方案，但它将呈现带有未编译html的twitter按钮（但$compile返回函数的输出返回带有我的作用域的已编译html）添加$timeout不起作用，除非我为$timeout添加了一些时间。像这样-

$timeout（function（）{$scope.doRender=true；}，500）$timeout（function（）{$scope.doRender=true；}，500）$timeout（function（）{$scope.doRender=true；}，500）$timeout（function（）{$scope.doRender=true；}，500）是否有任何方法可以避免将时间添加到$timeout。