如何在AngularJS指令中重新渲染模板？ [英] How to re-render a template in an AngularJS directive?

问题描述

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

I've create a directive that generates Twitter buttons. Since the scope variables on those buttons may change, I need to rebuild the button when it happens. Currently, I'm using jQuery to empty() the linked element and rebuild the button.

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()

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

Is there any way to get the directive to completely re-render the template instead?

推荐答案

这是一个可重复使用的指令，可以在发送事件时重建被转换的内容：

Here is a reusable directive you could use that will rebuild the transcluded content whenever an event is sent:

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/

Here is a jsFiddle demoing how it works: http://jsfiddle.net/robianmcd/ZQeU5/

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

Notice how the content of the input box gets reset every time you click the "Trigger Relink" button. This is because the input box is being remove and added to the DOM whenever the event is triggered.

您可以按原样使用此指令或修改它，以便由范围触发。$ watch（）而不是一个事件。

You could use this directive as is or modify it so that it is triggered by scope.$watch() instead of an event.

这篇关于如何在AngularJS指令中重新渲染模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！