How to print to console.log from inside Angular.js inline-template's script tag? How to print to console.log from inside Angular.js inline-template's script tag? angularjs angularjs

How to print to console.log from inside Angular.js inline-template's script tag?


You can achieve this by calling some debugging function defined in the controller scope with ng-init in the template definition. See this example.

Let's say the template is defined by

<script type="text/ng-template" id="myTemplate.html">  <div ng-init="log('In template: '+$index)">{{greet}} Melissa<div></script>

and you have a controller defined as

var app = angular.module('myApp', [])  .controller('myController', ['$scope', '$log', function($scope, $log) {    $scope.greetings = ["Hello", "Bonjour", "Guten tag"];    $scope.log = function(message) {      $log.debug(message);    }  }]);

then

<ul ng-controller="myController">  <li ng-repeat="greet in greetings">    <div ng-include src="'myTemplate.html'"></div>  </li></ul>

should print in the console

In template: 0
In template: 1
In template: 2

The ng-init is called each time a template is instantiated. I just log some values available in the scope, like $index which is the index in the ng-repeat loop.

See this example.


Using the above answer, I found the following simpler.

The easiest solution for me was to temporarily set $scope.console = console in my controller, letting the template have access to the window.console global variable and its associated functions as normal, through the $scope binding

Because the templates are tightly scoped, they do not have access to global and window variables, as a result console.X() is not available from the template. And, like you probably experienced, attempting to reference undefined values from within the template did not result in an error, just... nothing. (Cue tearing hair out trying to figure out why events aren't firing)