0

I just followed the tutorial on the link below https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

I did exactly as is described on the page, but evoluting it to a real project, I had to put some javascript code inside internal pages, pages/about.html for example. and for some reason, it is not executed. even you put a single 

<script>
    alert('foo');
</script>

it's not interpreted as a javascript code. and the alert is not shown

pages are injected using ng-view

<div id="main">

    <div ng-view></div>

</div>

whole code can be viewed in https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

thanks

Hugo Ferreira
  • 184
  • 13
  • 1
    check out this answer http://stackoverflow.com/questions/21336350/angularjs-inline-script-in-the-included-html-template – masimplo Sep 22 '15 at 22:00
  • My guess would be the html is being inserted with innerHTML, which doesn't execute javascript. http://jsfiddle.net/rc4yv1Lq/1/ – Kevin B Sep 22 '15 at 22:00
  • it's really easy to put code into directives. Will find it a much simpler path if you are just starting out – charlietfl Sep 22 '15 at 22:29

1 Answers1

0

I´ve been using scripts inside my templates (for lazy loading) for some time now without knowing that AngularJS wasn't doing the entire work. However, you can acomplish the task if you combine AngularJS with JQuery.

Check the following snippet for a solution:

index.html

<!DOCTYPE html>
<html ng-app="app">

<head>

  <meta charset="utf-8">

  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>

</head>

<body>

  <h1>angular app</h1>

  <div ng-view></div>

  <script type="text/javascript">
    var app = angular.module('app', ['ngRoute']);

    app.config(function($routeProvider) {

      $routeProvider

        .when('/', {
        template: '<a href="#script">i´m feeling lucky!</a>'
      })

      .when('/script', {
        templateUrl: 'script.html'
      });

    });
  </script>

</body>

</html>

script.html

script successfully loaded!
<script>alert('ok');</script>

The import order is important in this case. If you swap the JQuery with the AngularJS the solution will not work.

Hope it helps!

Romulo
  • 4,896
  • 2
  • 19
  • 28