Javascript inside a Angular router

Question

I have build a very basic Angular Router. But now that I want to interact with my elements inside that templateUrl, no javascript gets executed or those elements inside the templateUrl can not be accessed. I have copied the most of the code from this instruction, here.

My index file:

<html ng-app="myApp">

    <head></head>

    <body ng-controller="mainController">

         <a id="btnHome" href="#/">Startseite</a>
         <a id="btnPlanner" href="#/planner">LTC-Planner</a>
         <a id="btnSocial" href="#/social">LTC-Social</a>

         <div id="main">
              <!-- angular content -->
              <div ng-view></div>
         </div>

         <script src="js/routing.js"></script>
    </body>

</html>

This is my routing.js file:

// Create the angular module
var myApp = angular.module('myApp', ['ngRoute']);

// Configure our routes
myApp.config(function($routeProvider) {
   $routeProvider

   // Route for the home page
   .when('/', {
      templateUrl: 'pages/home.html',
      controller: 'mainController'
   });
});

// Create the controller and inject angular's $scope
myApp.controller('mainController', function($scope) {
    $scope.message = 'This is the HOME page';
});

and this is the template file located at pages/home.html:

<button id="btnTest">Say Hello</button>

<script>
    var btnTest = document.getElementById('btnTest');

    btnTest.addEventListener('click', function(){
        console.log('Hello'); 
    });
</script>

maybe one of you got an idea or has seen an alternative.

Thanks, André

can you also post your code where your angular app is bootstraped ? and maybe a jsfiddle ? — Willi Pasternak
– Willi Pasternak, Commented Aug 28, 2016 at 15:17
Possible duplicate of Including <script> tag in <script type="text/template"> tag — Michelangelo
– Michelangelo, Commented Aug 28, 2016 at 15:24
Thanks for all your quick answers. @dfsq What would be your approach of creating a page router? Compared to React or Polymer or a server side router this method seemed to be very simple. — André Kuhlmann
– André Kuhlmann, Commented Aug 28, 2016 at 15:33
@WilliPasternak This is not my page, but it works the same: embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg — André Kuhlmann
– André Kuhlmann, Commented Aug 28, 2016 at 16:12

Gatsbill · Accepted Answer · 2016-08-28 15:22:00Z

3

you should try to wrap your html template in a single tag

<div>
  <button ng-click="test()">Say Hello</button>
</div>

And remove the script to put the logic inside your controller. Since your using angular, just use ng-click to bind click listener.

myApp.controller('mainController', function($scope) {
    $scope.message = 'This is the HOME page';
    $scope.test = function() {
      console.log('Hello');
    }
});

answered Aug 28, 2016 at 15:22

Gatsbill

1,7901 gold badge12 silver badges25 bronze badges

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

2 Comments

André Kuhlmann Over a year ago

Thanks for your answer @Gatsbill. dfsq criticized my way of creating a router. What would have been your approche?

Gatsbill Over a year ago

With angular you can use ngRouter like you do or use ui-router but anyway both are usable. Dunno what was his point

Collectives™ on Stack Overflow

Javascript inside a Angular router

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related