script not running in templateurl

Question

This is my angular js file

test.js file:

var app = angular.module("angleapp", [])
.controller('MainController', ['$scope', function ($scope) {
    $scope.test = "hi all"
}])
.directive('programlisting', function () {
    return {
        restrict: 'E',
        scope: {
        },
        templateUrl: '/directives/test.html'
    };
});

test.html file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript">
            alert("stop");
        </script>
    </head>
    <body>
        hi how are you
    </body>
</html>

This is my index file:

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
        <script src="/directives/test.js"></script>
    </head>
    <body data-ng-app="angleapp"> 
        <div class="main" ng-controller="MainController">
            <programlisting></programlisting>
        </div>
    </body> 
</html>

Now when I try to run this

hi how are you

is coming in the output. but the alert window does not pop-op where i am i going wrong?

dfsq · Accepted Answer · 2015-08-17T10:45:35.817

3

The problem is that script tags are not executed by browser automatically when injected with innerHTML (what happens in case of templateUrl). Normally this tags are evaluated programmatically (eval). jQuery does it but jqLite (internal jQuery-like implementation of Angular) does not.

In your case the fix is simple, move jquery script tag before angular, then Angular will use jQuery for DOM manipulations:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Also, you need to clean up your test.html template, leave only body content. This is how test.html should look:

hi how are you

<script type="text/javascript">
    alert("stop");
</script>

And finally, I don't know why you need to have script tag inside of partial template, but in most cases this is bad idea, and there are better approaches.

edited Aug 17 '15 at 10:45

answered Aug 17 '15 at 10:40

dfsq

191,768
25
236
258

thnx a ton.. had been stuck here more than an hour. btw waht are the better approaches instead of using script tag inside partial templates? – Tyler Durden Aug 17 '15 at 10:52
You could look at the link attribute of the directive tag – joyBlanks Aug 17 '15 at 10:59
It depends on what you want to do. Why do you need script inside template? But in your case since you have custom directive, you should use link function of the directive. This is a code to be executed once template is rendered and connected to scope. https://docs.angularjs.org/api/ng/service/$compile#-link- – dfsq Aug 17 '15 at 11:00
Script tag not executed since html5. Refer https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML – Amitesh Mar 25 '18 at 09:42

score 1 · Answer 2 · answered Aug 17 '15 at 10:29

1

In partials html page(test.html), No need to write doctype, head and body tags. Just write your html elements and script. It should work.

answered Aug 17 '15 at 10:29

Aravinder

503
4
8

already tried that but not workin i mean the alert window does not show up – Tyler Durden Aug 17 '15 at 10:31
Can you create JS fiddle? – Aravinder Aug 17 '15 at 10:35

script not running in templateurl

2 Answers2

Linked