如何重新呈现在角度指令模板？ [英] How to re-render a template in an Angular directive?

问题描述

我已经创建生成的Twitter按钮的指令。由于这些按钮变量的作用域可能会改变，我需要当它发生重建按钮。目前，我使用jQuery 空（）链接的元素，重建按钮。

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?

推荐答案

下面是一个可重用的指令，你可以使用，这将重建每当发送的事件的transcluded内容：

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 demoing它是如何工作： 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.

因为是你可以使用此指令或修改它，使它通过范围。$手表触发（），而不是一个事件。

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

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