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

一尘不染

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

angularjs

我创建了一个生成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()

有没有办法让指令完全重新呈现模板呢？

阅读 226

2020-07-04

共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()而不是事件。

2020-07-04