27

In AngularJS, any inline javascript code that included in HTML templates doesn't work.

For Example:

main.html file:

<div ng-include="'/templates/script.html'"></div>

And script.html file:

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

When I open main page, I expect an alert message that say 'yes' but nothing happens. I think some security restrictions in the AngularJS is preventing inline scripts, but I couldn't find any workaround about that.

Note: I don't use jQuery or any other framework, only AngularJS 1.2.7.

Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
Murat Çorlu
  • 8,207
  • 5
  • 53
  • 78

4 Answers4

23

jQlite does not support script tags. jQuery does, so the recommendation is to include jQuery if you need this functionality.

From Angular's Igor Minar in this discussion:

we looked into supporting script tags in jqlite, but what needs to be done to get a cross-browser support involves a lot of black magic. For this reason we decided that for now we are just going to recommend that users use jquery along with angular in this particular case. It doesn't make sense for us to rewrite one third of jquery to get this working in jqlite.

Here's the related github issue jqLite should create elements in same way as jQuery where Igor sums up, before closing the issue, with this:

This is too much craziness for jqlite, so we are not going to do it. Instead we are going to document that if you want have script elements in ng:include or ng:view templates, you should use jquery.

demo plunker with jquery

KayakDave
  • 24,636
  • 3
  • 65
  • 68
  • I loaded jQuery, and now the `alert` works. But controllers are not working. Do you know why? – Saeed Neamati Feb 15 '15 at 10:36
  • 1
    jQuery is already included before Angular in my code and it still does not work. Any other ideas? – molerat Jun 03 '17 at 18:31
  • @molerat same here but it works if this jquery version is added before angular - https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js – Fakeer May 08 '18 at 02:16
6

Angular uses the $sanitize on ng-include directives which strips out scripts. A better approach for templates is to create a controller for that template.

It is better to use an individual controller for templates.

In template.html

<form role="form" ng-controller="LoginController">
   <input type="text" placeholder="Email" ng-model="email">
   <input type="password" placeholder="Password" ng-model="password">
    <button class="btn btn-success" ng-click="login()">Sign in</button>
</form>

In the LoginController you can use whatever code you want

angular.module('myApp.controllers', []).
  controller('LoginController', [function() {
      alert('controller initialized');
  }])
FelixSFD
  • 6,052
  • 10
  • 43
  • 117
Nathaniel Johnson
  • 4,731
  • 1
  • 42
  • 69
  • Do you know a workaround to disable that sanitizing? – Murat Çorlu Jan 24 '14 at 15:59
  • I was researching it but nothing jumped out at me. There seem to be ways to bypass the sanitize process if you are using it via js, but I couldn't find a way to specifically make the directive itself ignore sanitizing. – Nathaniel Johnson Jan 24 '14 at 16:02
3

The event triggered when ng-include adds content is $includeContentLoaded. Your scripts should be included in this event:

For example (Plucker Demo):

function SettingsController($scope, $window) {
  $scope.template={};
  $scope.template.url = "demo.html";

  $scope.$on('$includeContentLoaded', function(event){
    $window.alert('content load');
  });

}

Additionally you can set an init function using the onload attribute:

html

<div ng-include="template.url" onload="alertMe()" > </div> </div>

Controller

$scope.alertMe=function(){
    $window.alert('sending alert on load');
  }
Dalorzo
  • 19,834
  • 7
  • 55
  • 102
3

Include jQuery and change order of the angular.js and jquery.js. jQuery must be first, otherwise it does not work

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Mustafa SAHIN AYDIN
  • 99
  • 1
  • 4