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

在渲染功能中尝试这样的事情：

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 2

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

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

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

AngularJS重载指令模板

3 个答案: