1

I have a partial in my AngularJS application that needs a 3rd party .js file to run. In order for this partial to work correctly, I have to have the javascript load after the page is loaded in the app view.

What I have so far is this for the directive to include the scripts:

.directive('loadScripts',function() {
  return {
    restrict :'EA',
    link: function(scope, element, attrs) {
      angular.element('<script src="/js/jquery.cycle.all.js" type="text/javascript"></script><script src="/js/main.js" type="text/javascript"></script>').append(element);
    }
  }
})

Then on the partial I have <div load-scripts></div>. The partial doesn't get anything loaded, the directive isn't adding the html tags to the page. Any ideas on what I should do?

I reviewed a similar question/answer here: Correct way to integrate Jquery plugins in Angular.js

I appear to be following it exactly, except i'm using angular.element instead. I'm tried different tests and none of the element is being included into the DOM

Community
  • 1
  • 1
Speedy059
  • 629
  • 10
  • 24
  • That is wrong. you are doing the otherway around. However you need to created script element and append it to `element`. Not sure why are you doing this. You could just put the script in the view itself. You could just do `['/js/jquery.cycle.all.js', '/js/main.js'].forEach(function(url) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; element.append(script); });` – PSL Jan 12 '15 at 23:02
  • You actually create the script tag, that is ok but afterwards, you append the existing directive element on it. Nothing there can happen. You can try: `element.replaceWith(angular.element(''));` – Himmet Avsar Jan 12 '15 at 23:02
  • @HimmetAvsar i believe that is a wrong way to do. – PSL Jan 12 '15 at 23:06

0 Answers0