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重新加載指令模板

回答

相關問題