AngularJs 1.6 Component Script inside tempalteUrl not executing

Question

I have a script tag inside the angular component's template [report.template.html] and it is not being executed upon load.

  <script >
  $(document).ready(function() {
  console.log("calling showHide");
  });
  </script>

Note: Loaded the jquery lib before angularjs lib as shown in the below plunkr

https://plnkr.co/edit/u8XGlVlY9Q5DmKmPOQwA?p=preview

I know i must be missing something simple. Can someone please help where I am doing it wrong ?

Possible duplicate of Insert HTML with scripts that should run — Patrick Barr
– Patrick Barr, Commented Mar 22, 2017 at 17:37

Sachila Ranawaka · Accepted Answer · 2017-03-22 17:17:12Z

1

Don't know is this what you looking for but you an use the angular.element(document).ready() method instead of jquery functions like this

var reportController = function() {
   var ctrl = this;
      angular.element(document).ready(function () {
       console.log("calling showHide");
    });
      console.log("report ctrl");
};

Demo

answered Mar 22, 2017 at 17:17

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

3 Comments

mahesh reddy Over a year ago

In my project, each report is a chart and when it is loaded, I need to execute a jquery function like $(".showhideWIdget").showhide();

Sachila Ranawaka Over a year ago

you can simply do that using ng-show/ng-hide directive. Or you can put this in your controller also. But since you are using angular avoid using jquery as much as possible. make it all consistent with the angular

mahesh reddy Over a year ago

the showhide function is a custom data-widget processing js function that I need to follow as per company standard.

Collectives™ on Stack Overflow

AngularJs 1.6 Component Script inside tempalteUrl not executing

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related