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

Integrating widget into a angular app using a directive

本文关键字：应用程序 集成 指令 小部      更新时间：2023-12-24

所以我目前已经将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();
}

不幸的是，这不起作用。如有任何建议，我们将不胜感激。

所以我找到了一个解决方案，并想把它发布在这里，因为我相信如果其他人在Angular中使用Yotpo，他们肯定会遇到这个问题。

答案是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)
            }
        }
    }

您不需要指令就可以实现这一点。

widget.js脚本使用HTML中的数据属性。您需要确保在加载javascript之前设置了这些数据属性。

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

相关文章：