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 thewindow.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)