it-roy-ru.com

Как перерисовать шаблон в директиве 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()

Есть ли способ получить директиву для полного повторного рендеринга шаблона?

24
Soviut

Вот директива многократного использования, которую вы можете использовать, которая будет перестраивать включенный контент при отправке события:

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() вместо события.

46
rob

Несколько советов:

  1. Используйте шаблон директивы и привязывайте переменные к области видимости, а не создавайте HTML вручную. В этом случае вам не нужно повторно визуализировать шаблон. Angular обновит его сам при изменении свойств области.

  2. Используйте attrs. $ Наблюдаю функцию для запуска некоторого кода при изменении значения атрибута

5
Alexander Puchkov

Другой способ добиться этого - использовать ng-if.

Например: <myDirective ng-if="renderdirective"></myDirective>

Директива не будет создана, пока ваша renderdirective не будет верна. Это также будет работать наоборот, если вы хотите удалить директиву и позволить ей воссоздать, используя новые значения атрибута.

1
Muthukrishnan

То, что вы пытаетесь сделать, следует той же функции, что и функция компиляции в директивах, она перерисовывает HTML. Вы пробовали это? 

Это своего рода хакерский способ сделать это, но положить в директиву переменную ng-if truey, и когда вы хотите отрендерить, установить и сбросить переменную truey:

angularjs: принудительный повторный рендеринг/полное обновление шаблона директивы

1
js_gandalf

Небольшой вариант ответа @rob:

import * as angular from 'angular';

class ReRenderDirective implements angular.IDirective {

  public restrict = 'A';
  public replace = false;
  public transclude = true;
  constructor( private $rootScope: angular.IRootScopeService, private $compile: angular.ICompileService ) {

  }

  public link = (
    scope: angular.IScope,
    element: angular.IAugmentedJQuery,
    attr: any,
    modelCtrl: any,
    transclude: angular.ITranscludeFunction ) => {

    let previousContent = null;

    let triggerRelink = () => {
      if ( previousContent ) {
        previousContent.remove();
        previousContent = null;
      }

      transclude(( clone ) => {
        element.append( clone );
        previousContent = clone;

        element.html( attr.compile );
        this.$compile( element.contents() )( scope );
      } );

    };

    triggerRelink();
    this.$rootScope.$on( attr.reRender, triggerRelink );

  }

}

export function reRenderFactory(): angular.IDirectiveFactory {

  var directive = ( $rootScope: angular.IRootScopeService, $compile: angular.ICompileService ) => new ReRenderDirective( $rootScope, $compile );
  directive.$inject = [ '$rootScope', '$compile' ];
  return directive;
}

Используйте это с:

<div re-render="responsive">
  <header-component/>
</div>

и объедините его с $ широковещательной передачей где-нибудь в вашем коде:

this.$rootScope.$broadcast( 'responsive' );

Что я сделал, так это прослушал изменение размера страницы, которое затем запустит широковещательную рассылку. На основании этого я могу изменить шаблон компонента с настольного компьютера на мобильный. Поскольку код header-component в примере включен, он перерисовывается и перекомпилируется.

Это работает как шарм для меня.

Спасибо, Роб, за то, что я выбрал правильный путь.

0
Mattijs