Javascripts in html file included using ng-include does not execute

Question

I'm using ng-inculde to include an html file that aslo includes some javascript codes for that page, but the javascripts are not executed,

here is my Code :

    <head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title ng-cloak>{{Page.Title}}</title>
  <link rel="stylesheet" href="/media/css/bootstrap.min.css">
  <link rel="stylesheet" href="/media/css/swiper.min.css">
  <link rel="stylesheet" href="/media/css/owl.carousel.css">
  <link rel="stylesheet" href="/media/css/style.css">
  <link href="/media/css/nprogress.css" rel="stylesheet">
  <script type="text/javascript" src="/media/js/angular.js"></script>
  <script src="/media/js/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="/media/js/app.js"></script>
  <script src="/media/js/vendor/modernizr-2.8.3.min.js"></script>
  <meta name="description" content="">
  <meta name="fragment" content="!">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <script type="text/javascript" src="/media/js/ng-device-detector.js"></script>
  <script type="text/javascript" src="/media/js/re-tree.js"></script>
  <script type="text/javascript" src="/media/js/angular-route.js"></script>
  <script type="text/javascript" src="/media/js/angular-md5.js"></script>
  <script type="text/javascript" src="/media/js/angular-cache.js"></script>
  <script type="text/javascript" src="/media/js/bootstrap.min.js"></script>
</head>
<body>
      <div ng-view></div>
</body>
</html>

And my home.html page:

<p>Welcome, this is the home page!!</p>
<div ng-include src="'/template/include/home_s.html'"></div>

And this is my home_s.html:

<script>
  console.log("Selam, chooni khasi?");
  alert("Sellam, choooni?");
</script>

Try with <div ng-include="/template/include/home_s.html"></div>. — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Nov 15, 2015 at 7:02
Your javascript files are loaded using relative references. Is it possible that the relative references are breaking because the include is from a relative subfolder of home.html? Have you confirmed that the javascript files load correctly in the browser? — christutty
– christutty, Commented Nov 15, 2015 at 8:37
Yes, javascript file is loaded correctly, but is not running!! why is that? — Masoud Motallebipour
– Masoud Motallebipour, Commented Nov 16, 2015 at 7:05

tasseKATT · Accepted Answer · 2015-11-15 08:42:43Z

2

Either:

<ng-include src="'/template/include/home_s.html'"></ng-include>

Or:

<div ng-include="'/template/include/home_s.html'"></div>

However, Angular on its own doesn't support loading scripts inside templates. For this to work you need to include jQuery (make sure you load it before Angular).

Demo without jQuery: http://plnkr.co/edit/Qh27ArEyIk53VRB7e61C?p=preview

Demo with jQuery: http://plnkr.co/edit/TxOmx5ksEFC2larJiJBA?p=preview

edited Nov 15, 2015 at 8:42

answered Nov 15, 2015 at 8:21

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

Javascripts in html file included using ng-include does not execute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related