ディレクティブを使用してアングルアプリにウィジェットを統合

Question

私は現在、Yotpoの「レビューとコメント」をAngularアプリケーションに統合しています。

それはjavascriptのウィジェットと一部のHTMLで構成されています

のJs：

var e=document.createElement("script"); 

e.type="text/javascript", 
e.async=true, 
e.src="//staticw2.yotpo.com/API/widget.js", 
e.id="test"; 

var t=document.getElementsByTagName("script")[0]; 
t.parentNode.insertBefore(e,t); 

HTML：

<div class="yotpo yotpo-main-widget" 
    data-product-id="{{ product.sku }}" 
    data-name="{{ product.title }}" 
    data-url="{{ pageUrl }}" 
    data-image-url="{{ pageImage }}" 
    data-description="{{ product.description }}"> 
</div> 

をディレクティブにJSを配置することにより、私は仕事にそれを持っていますただし、ページをリロードしたときにのみ機能します。

は試してみて、この問題を解決、私は、ユーザーがページを離れるときに、スクリプトを削除し、ユーザーが

は例のページに戻ったときにスクリプトを挿入するには：

link: function ($scope, elem) { 
    elem.bind('$destroy', function() { 
     var widgetScript = angular.element('#foo'); 
     jQuery(WidgetScript).remove(); 
    }); 

    function loadWidget() { 
     var e=document.createElement("script"); 

     e.type="text/javascript", 
     e.async=true, 
     e.src="//staticw2.yotpo.com/API/widget.js", 
     e.id="foo"; 

     var t=document.getElementsByTagName("script")[0]; 
     t.parentNode.insertBefore(e,t); 
    } 

    loadWidget(); 
} 

は、残念ながら、これはありません作業。どんなアドバイスも非常に高く評価されます。

Answer 1

私は解決策を見つけたので、ここで投稿すると思っていました。私は、YotpoをAngularで使用している場合、誰かがこの問題に遭遇することは間違いありません。

答えはyotpo.initWidgets();

残念ながらYotpoのドキュメンテーションではこのことについて何も情報がないです。

だから、これは私がやってしまったものであり、それは魔法のように動作：

.directive('yotpo', function ($document, $timeout) { 
    return { 
     restrict: 'AE', 
     link: function() { 

      function loadWidget() { 
       var e = document.createElement("script"); 

       e.type = "text/javascript", 
       e.async = true, 
       e.src = "//staticw2.yotpo.com/API/widget.js", 
       e.id = "test"; 

       var t = document.getElementsByTagName("script")[0]; 
       t.parentNode.insertBefore(e,t); 
      } 

      loadWidget(); 

      if (typeof yotpo !== 'undefined') { 
       $timeout(function() { 
        yotpo.initWidgets(); 
       }, 500) 

      } 
     } 
    } 

Answer 2

この作業を行うための指示は必要ありません。

widget.jsスクリプトは、HTMLのデータ属性を使用します。 javascriptがロードされる前に、それらのデータ属性が設定されていることを確認する必要があります。

また、属性に一方向バインディングを使用することをお勧めします。