Jak wydrukować do pliku console.log z wewnątrz skryptu skryptu Angular.js?

Question

Próbuję użyć wbudowanego szablonu Angular.js. Chciałbym mieć sposób debugowania obiektów kątowych przez drukowanie na konsoli za każdym razem, gdy renderowana jest strona HTML.

Szablon wbudowany umieszcza szablony html wewnątrz znaczników skryptu. Na przykład:

<script type="text/ng-template" id="/htmlpage.html"> 
    <div class="page-header"> 
    <h1>Title</h1> 
    </div> 
    <!-- everything else here is html too --> 
</script> 

Jest to trudne, ponieważ elementy wewnątrz znaczników skryptów nie są już JavaScriptem. Więc nie wiem jak drukować na konsoli wewnątrz htmlpage.html z inline-template.

Próbowałem, ale nie powiodło się z zagnieżdżanie tag skryptu:

<script type="text/ng-template" id="/htmlpage.html"> 
    <!-- html page template Angular stuff before is okay --> 

    <script>console.log("this line DOESN'T SHOW UP anywhere");</script> 

    <!-- html page template Angular stuff AFTERWARDS ALL FAIL--> 
</script> 

Próbowałem też po prostu rzuca się w gołej console.log, ponieważ jest wewnątrz tagu skrypt.

<script type="text/ng-template" id="/htmlpage.html"> 
    <!-- rest of html page template is okay --> 

    console.log("this entire line gets output as text on the html page"); 

    <!-- rest of html page template is okay --> 
</script> 

ale cała linia, console.log("this entire line gets output as text on the html page");, zostanie wydrukowana na stronie html, a nie konsola!

Answer 1

Można to osiągnąć, wywołując funkcję debugowania zdefiniowaną w zakresie kontrolera za pomocą ng-init w definicji szablonu. Zobacz this example.

Powiedzmy, że szablon jest zdefiniowany przez

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

i masz kontroler zdefiniowana jako

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); 
    } 
    }]); 

następnie

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

należy wydrukować w konsoli

W szablonie: 0
W szablonie: 1
W szablonie: 2

ng-init nazywa każdym razem, gdy szablon jest tworzony. Po prostu rejestruję niektóre wartości dostępne w zakresie, takie jak $index, który jest indeksem w pętli ng-repeat.

Zobacz this example.