André Kuhlmann André Kuhlmann - 1 year ago 100
AngularJS Question

Javascript inside a Angular router

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">


<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>

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


This is my routing.js file:

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

// Configure our routes
myApp.config(function($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>

var btnTest = document.getElementById('btnTest');

btnTest.addEventListener('click', function(){

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


Answer Source

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

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

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() {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download