Question

所以我目前已经整合了Yotpo＆＃39;评论和评论＆＃39;进入我的Angular应用程序。

它包含一个javascript小部件和一些Html：

JS：

--jsonArray

HTML：

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

通过将JS放入指令中，我可以使用它，但是，它只会在您重新加载页面时起作用。

要尝试解决此问题，我会在用户离开页面时删除脚本，并在用户返回页面时重新插入脚本

示例：

<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>

不幸的是，这不起作用。任何建议都将非常感谢。

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之前设置这些数据属性。

我还建议您对属性使用单向绑定。

使用指令将小部件集成到角度应用程序中

2 个答案: