CODEWITHSUNDEEP
angularjs
Ben
Ben

Reputation: 16649

Executing javascript in angular view

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?

Upvotes: 0

Views: 157

Answers (1)

Yoni Baciu
Yoni Baciu

Reputation: 2707

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
  };
}]);

Upvotes: 1

Related Questions