web-dev-qa-db-fra.com

Comment imprimer sur console.log depuis l'intérieur de Angularjs inline-template utilise une balise script

J'essaie le modèle en ligne de Angular.js. Je voudrais avoir un moyen de déboguer des objets angulaires en imprimant sur la console chaque fois qu'une page html est rendue.  

Le modèle en ligne place les modèles HTML dans des balises de script. Par exemple:

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

C'est délicat, car les éléments contenus dans les balises de script ne sont plus vraiment du code JavaScript. Donc, je ne sais pas comment imprimer sur la console à l'intérieur du htmlpage.html avec inline-template.  

J'ai essayé mais j'ai échoué avec l'imbrication d'une balise de script:

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

J'ai également essayé de lancer simplement un fichier console.log nu, car il se trouve dans une balise de script.

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

mais la ligne entière, console.log("this entire line gets output as text on the html page");, est imprimée sur la page html, pas sur la console!

javascripthtmlangularjsdebuggingconsole
13
Melissa

Vous pouvez y parvenir en appelant une fonction de débogage définie dans la portée du contrôleur avec ng-init dans la définition du modèle. Voir cet exemple .

Disons que le modèle est défini par

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

et vous avez un contrôleur défini comme

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

puis

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

devrait imprimer dans la console

Dans le template: 0
Dans le modèle: 1
Dans le modèle: 2

Le ng-init est appelé chaque fois qu'un modèle est instancié. Je viens de consigner certaines valeurs disponibles dans la portée, comme $index, qui est l'index dans la boucle ng-repeat.

Voir cet exemple .

14
T.Gounelle

En utilisant la réponse ci-dessus, j'ai trouvé ce qui suit plus simple. 

La solution la plus simple pour moi a été de définir temporairement $scope.console = console dans mon contrôleur, afin que le modèle ait accès à la variable globale window.console et à ses fonctions associées normalement, via la liaison $scope.

Étant donné que les modèles ont une portée étroite, ils n'ont pas accès aux variables globales et de fenêtre. En conséquence, console.X() n'est pas disponible dans le modèle. Et, comme vous l'avez probablement déjà expérimenté, tenter de référencer des valeurs non définies à l'intérieur du modèle n'a pas entraîné d'erreur, mais ... rien. (Cue arrachant les cheveux en essayant de comprendre pourquoi les événements ne se déclenchent pas)

1
mix3d