Pinterest 板仅适用于页面重新加载答案

【问题标题】：Pinterest board only works on page reloadPinterest 板仅适用于页面重新加载
【发布时间】：2017-01-18 08:40:59
【问题描述】：

我有一个 AngularJS 应用程序，它是一个单页应用程序。在每个单独的页面上都会加载 Pinterest 板，这是通过 Pinterest 的小部件构建器完成的：

它让我可以坚持到我的应用程序中：

<a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/pinterest/pinstudio/"></a>

和：

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

我添加了这个并加载了 Pinterest 板，但是当转到不同的页面时，如果没有刷新页面，Pinterest 板将无法加载，我认为这是因为脚本无法重新生成/或加载特定的页面上的元素，它只是不知道它在那里。

所以我在顶级控制器的 Angular Js 应用程序中使用了以下内容：（从 here 获得）

$scope.loadScript = function(url, type, charset) {
    if (type===undefined) type = 'text/javascript';
    if (url) {
        var script = document.querySelector("script[src*='"+url+"']");
        if (!script) {
            var heads = document.getElementsByTagName("head");
            if (heads && heads.length) {
                var head = heads[0];
                if (head) {
                    script = document.createElement('script');
                    script.setAttribute('src', url);
                    script.setAttribute('type', type);
                    if (charset) script.setAttribute('charset', charset);
                    head.appendChild(script);
                }
            }
        }
        return script;
    }
};

然后我将以下内容插入到我的子控制器中以加载脚本：

$scope.$parent.loadScript('//assets.pinterest.com/js/pinit.js');

这可以正常工作并将我的脚本添加到页面中，但是 pinterest 板在刷新之前不会加载，我没有想法，我似乎无法找出为什么脚本在页面刷新之前不会加载元素.

任何帮助都会很棒。

【问题讨论】：

这是可能，因为在加载脚本时embedBoard 元素不存在。在 Angular 应用上制作 Pin 按钮，我们使用 PinUtils.pinAny(); 对于板，您可以尝试 github.com/cornflourblue/angular-pinterest
请随意发布作为答案，我可以标记为正确:)

标签： javascript jquery angularjs pinterest

【解决方案1】：

这是可能，因为在加载脚本时embedBoard 元素不存在。

在类似的情况下，为了在 Angular 应用上制作 Pin 按钮，我们使用了 PinUtils.pinAny();

板子可以试试angular-pinterest。

【讨论】：