如何在AngularJS指令中重新渲染模板？

Question

我创建了一个生成Twitter按钮的指令.由于这些按钮上的范围变量可能会发生变化,因此我需要在按钮发生时重建它.目前,我正在使用jQuery empty()链接元素并重建按钮.

app.directive 'twitterShare', ($timeout, $window) ->
    restrict: 'E'
    template: '<a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ text }}" data-url="{{ url }}">Twitter</a>'
    scope:
        text: '@'
        url: '@'
    link: (scope, el, attrs) ->
        scope.$watch 'text', -> rebuild()
        scope.$watch 'url' , -> rebuild()

        rebuild = ->
            $(".twitter-share-button").remove()
            tweet = $ '<a>'
            .attr 'href', 'https://twitter.com/share'
            .attr 'id', 'tweet'
            .attr 'class', 'twitter-share-button'
            .attr 'data-lang', 'en'
            .attr 'data-count', 'none'
            .text 'Tweet'

            el.prepend tweet
            tweet.attr 'data-text', scope.text
            tweet.attr 'data-url', scope.url
            $window.twttr.widgets.load()

有没有办法让指令完全重新渲染模板？

Answer 1

这是一个可重用的指令,您可以使用该指令在发送事件时重建已转换的内容:

app.directive('relinkEvent', function($rootScope) {
    return {
        transclude: 'element',
        restrict: 'A',
        link: function(scope, element, attr, ctrl, transclude) {
            var previousContent = null;

            var triggerRelink = function() {
                if (previousContent) {
                    previousContent.remove();
                    previousContent = null;
                }

                transclude(function (clone) {
                    element.parent().append(clone);
                    previousContent = clone;
                });

            };

            triggerRelink();                
            $rootScope.$on(attr.relinkEvent, triggerRelink);

        }
    };

});

这是一个jsFiddle演示如何工作:http://jsfiddle.net/robianmcd/ZQeU5/

注意每次单击"触发器重新链接"按钮时,输入框的内容如何重置.这是因为每当触发事件时,都会删除输入框并将其添加到DOM.

您可以按原样使用此指令,也可以对其进行修改,以便由scope.$watch()事件而不是事件触发.

Answer 2

一些建议:

1. 使用指令模板并将变量绑定到范围而不是手动创建HTML.在这种情况下,您无需重新渲染模板.当范围属性更改时,Angular将自行更新它.

2. 使用attrs.$ observe函数在属性值更改时运行一些代码