AngularJS reload директивный шаблон

Question

Я пишу директиву AngularJS, чтобы показать кнопку щебетать share, после каждого изменения атрибута мне нужно перезагрузить и скомпилировать шаблон директивы, потому что после вызова twttr.widgets.load содержимое будет заменено iframe, содержащим кнопка.

function TwitterShareDirective($twitterRender, debounce, $compile) { 
     function template() { 
      var element = document.createElement('a'); 
      element.href = 'https://twitter.com/share'; 
      element.setAttribute('class', 'twitter-share-button'); 
      element.setAttribute('data-url', '{{href}}'); 
      element.setAttribute('data-text', '{{text}}'); 
      element.setAttribute('data-via', '{{via}}'); 
      element.setAttribute('data-size', '{{size}}'); 
      element.setAttribute('data-related', '{{related}}'); 
      element.setAttribute('data-hashtags', '{{hashtags}}'); 
      element.setAttribute('data-lang', '{{lang}}'); 
      return element; 
     } 
     return { 
      restrict: 'E', 
      template: template(), 
      scope: { 
       'href': '@url', 
       'size': '@size', 
       'text': '@text', 
       'via': '@via', 
       'related': '@related', 
       'hashtags': '@hashtags', 
      }, 
      link: function (scope, element, attr) { 
       scope.lang = $twitterRender.getLang(); 
       var render = function() { 
        var dom = template(); 
        element.empty(); 
        element.append(dom); 
        $compile(dom)(scope); 
        scope.$apply(); 
        $twitterRender.render(element[0]); 
       }; 
       var debouncedRender = debounce(render, 800); 
       attr.$observe('url', function() { debouncedRender(); }); 
       attr.$observe('size', function() { debouncedRender(); }); 
       attr.$observe('text', function() { debouncedRender(); }); 
       attr.$observe('via', function() { debouncedRender(); }); 
       attr.$observe('related', function() { debouncedRender(); }); 
       attr.$observe('hashtags', function() { debouncedRender(); }); 
      } 
     }; 
    } 

EDIT: Проблема решена

Я исправил проблему с помощью решения от @irth и объема $ применяется(), что делает магию

Answer 1

попробовать что-то подобное в вашей визуализации функции:

var domElement = document.createElement(newVal); 
element.empty(); 
element.append(domElement); 
$compile(domElement)(scope); 

Если это не сделать трюк из коробки, смотрите, как я это сделал здесь: https://github.com/irthos/ecopos4/blob/master/app/directives/helper.js

Answer 2

Попробуйте обернув его в ng-if директивы..

<div ng-if="doRender"> 
    <!-- content --> 
</div> 

// In directive whenever you need a reload 

$scope.doRender = false; 

// Postpone to end of digest queue 

$timeout(function() { 
    $scope.doRender = true; 
}); 

Answer 3

В ваша функция рендеринга вызовет компиляцию $ следующим образом:

var render = function() { 
       //Here I want to replace contents with new compiled template; 
       $compile(element)(scope); 
       twttr.widgets.load(element[0]); 
      };