AngularJS: Script tag not working in ng-include

Question

I have a file index.html with the following code:

<div ng-include="'fragment-1.html'"></div>

The code of fragment-1.html:

<b>Inside Fragment 1</b>
<script type="text/javascript">
    alert("Inside Fragment 1");
</script>

When I load index.html into the browser, output is:

Inside Fragment 1

The DOM has the <script> tags but the alert is not shown.

My hypothesis:

Because the DOM loads first along with the Angular modules and then Angular checks and binds the data(in this case, fragment-1.html file content) to the view(index.html), it just adds the elements of fragment-1.html in DOM. To execute the JS inside fragment-1.html, we should create a hack for it. Am I right in this explanation? Or is there something else that I may be missing?

Possible duplicate of how can i load javascript file along with ng-include template — gyc
– gyc, Commented Dec 8, 2015 at 12:08

Community · Accepted Answer · 2017-05-23 12:10:21Z

4

I had to load jQuery before loading Angular. The explanation is in the link specified above. Explanation: script not running in templateurl

To include another partial HTML file in your parent HTML file, one can also use Angular directives, depending on the situation. See this answer for when to use ng-include and when to use directives: https://stackoverflow.com/a/24172025/3132646

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Dec 9, 2015 at 6:40

chaudharyp

3,6243 gold badges29 silver badges44 bronze badges

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

Comments

Chris Hermut · Accepted Answer · 2015-12-08 12:09:57Z

1

You don't need to hack. Angular gives you a neat and simple solution to what you want to achieve with your code.

Controller

.controller('fragmentOneCtrl', function ($scope) {
    alert('"Inside Fragment 1"');
})

View

<div ng-repeat="go in ['go', 'gogo']" ng-include="'includeThis'">

</div>

<script type="text/ng-template" id="includeThis">
    <div ng-controller="fragmentOneCtrl">

    </div>
</script>

answered Dec 8, 2015 at 12:09

Chris Hermut

1,7564 gold badges17 silver badges32 bronze badges

3 Comments

chaudharyp Over a year ago

This works perfectly when the code is in index.html itself. I want to include a separate file fragment-1.html whose javascript code should run when it is included in index.html.

Chris Hermut Over a year ago

Ok but is it not an exact use case for directive?

chaudharyp Over a year ago

Thanks for pointing me to directives. Still learning Angular. Was still unable to execute JS inside fragment-1.html using directives. Found my answer here: http://stackoverflow.com/questions/32048046/script-not-running-in-templateurl

Mohammad Sidani · Accepted Answer · 2018-05-18 08:13:26Z

0

You may want to use $sce.trustAsHtml before injecting the resource in html

answered May 18, 2018 at 8:13

Mohammad Sidani

12 bronze badges

Collectives™ on Stack Overflow

AngularJS: Script tag not working in ng-include

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related