AngularJS重新加载指令模板

我正在写一个AngularJS指令来显示twitter共享按钮，每次更改属性后我需要重新加载和编译指令模板，因为在调用twttr.widgets.load后，内容将被替换为iframe包含按钮。AngularJS重新加载指令模板

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

编辑：问题解决

我上的使用从@irth和范围的解决问题$适用（），使魔术

来源

2015-05-24 DocLM

尝试这样的事情在你的渲染功能：

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

如果不这样做的伎俩开箱，请看看我是如何做到在这里：https://github.com/irthos/ecopos4/blob/master/app/directives/helper.js

来源

2015-05-25 03:37:22 irth

我尝试你的解决方案，但它会呈现一个未编译的html的twitter按钮（但是$ compile返回的函数的输出返回一个已编译的html， – DocLM

尝试包成一个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; 
});

来源

2015-05-24 10:52:36 null

添加$超时不起作用，除非我添加一些时间到$超时。像这样 - '$ timeout（function（）{ $ scope.doRender = true; }，500）;'有什么方法可以避免时间增加到$ timeout。 – Anita

在你的渲染函数调用$ compile如下：

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

来源

2015-05-25 10:09:41

AngularJS重新加载指令模板

回答

相关问题