CODEWITHSUNDEEP
angularjsdom
chaudharyp
chaudharyp

Reputation: 3634

AngularJS: Script tag not working in ng-include

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?

Upvotes: 1

Views: 8970

Answers (3)

Mohammad Sidani
Mohammad Sidani

Reputation: 1

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

Upvotes: 0

chaudharyp
chaudharyp

Reputation: 3634

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

Upvotes: 4

Chris Hermut
Chris Hermut

Reputation: 1758

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>

Upvotes: 1

Related Questions