Executing javascript in angular view

Question

The following example correctly executes the javascript code:

index.html

<body>
    <img class="img-circle" data-src="holder.js/140x140" alt="140x140">
</body>

But this example does not execute the javascript:

index.html

<body>
    <article data-ng-view></article>
</body>

myview.html

<img class="img-circle" data-src="holder.js/140x140" alt="140x140">

Problem:

I do not expect this to be a problem with holder.js. Instead, I find that I keep running into this problem again and again, whenever the file that is included in the view contains some form of javascript . In those cases the javascript doesn't get executed.

Why does this happen and how can I prevent it?

Yoni Baciu · Accepted Answer · 2014-04-04 16:46:03Z

1

I think this happens because myview.html is loaded into the page via AJAX and by that time the holder script already scanned the page for images.

Using an angular directive could be an elegant solution here. You can create a holder-img directive on the img that will run the holder code on that specific element.

<img holder-img class="img-circle" data-src="holder.js/140x140" alt="140x140">


angular.directive('holderImg', [function() { 
  function link(scope, element, attrs) {
    Holder.run({
      images: element
    });      
  }

  return {
    link: link
  };
}]);

edited Apr 4, 2014 at 16:46

answered Apr 3, 2014 at 13:21

Yoni Baciu

2,7171 gold badge22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Over a year ago

I use this script in the majority of my view files. Including <script>Holder.run()</script> at the bottom of each view file works - but there has to be a better way?

Collectives™ on Stack Overflow

Executing javascript in angular view

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related