André Kuhlmann André Kuhlmann - 3 months ago 22
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">

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

Answer

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');
    }
});
Comments