[angularjs]widget融入一个角的应用程序使用的指令

发布时间: 2017/4/16 4:23:46
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

所以我有目前纳入 Yotpo '评论和评论' 我角的应用程序。

它是由一个 javascript widget和一些 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();
}

不幸的是这不起作用。任何意见将不胜感激。

解决方法 1:

所以我已经找到了解决办法,认为我将它张贴在这里,确信,其他人无疑会遇到这个问题,如果他们使用的 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)

            }
        }
    }
赞助商