我有一个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板再次加载直到刷新,我没有想法,我似乎无法找出为什么脚本不会加载元素直到页面得到了更新。
任何帮助都会很棒。
答案 0 :(得分:1)
这可能是 ,因为加载脚本时不存在embedBoard
元素。
在类似的上下文中,为了在Angular应用上制作Pin按钮,我们使用了PinUtils.pinAny();
对于主席,您可以尝试angular-pinterest。