0

I have a AngularJS application, which is a single page application. On each individual page a Pinterest board gets loaded, this is done through Pinterest's widget builder:

This can be found here

It gives me the following to stick into my application:

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

and:

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

I added this and the Pinterest board loaded, however when going to a different page, the Pinterest board wouldn't load without a page refresh, I believed this was because the script wasn't able to regenerate / or load the specific element on the page, it just didn't know it was there.

So I used the following inside of my Angular Js application in the top-level controller: ( got this from 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;
    }
};

I then inserted the following into my sub controller to load the script in:

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

This works correctly and adds my script to the page, but again the pinterest board wont load until refresh, I am out of ideas, I can't seem to find out why the script wont load the element until the page is refreshed.

Any help would be awesome.

Community
  • 1
  • 1
andy jones
  • 904
  • 1
  • 12
  • 37
  • 1
    This is **likely** because `embedBoard` element is not present when script gets loaded. For making Pin button on Angular app, we used `PinUtils.pinAny();` For board, you can try https://github.com/cornflourblue/angular-pinterest – Sangharsh Jan 18 '17 at 09:08
  • Please feel free to post as an answer and i can mark as correct :) – andy jones Jan 18 '17 at 10:31

1 Answers1

1

This is likely because embedBoard element is not present when script gets loaded.

In similar context, for making Pin button on Angular app, we used PinUtils.pinAny();

For board, you can try angular-pinterest.

Sangharsh
  • 2,999
  • 2
  • 15
  • 27