webentwicklung-frage-antwort-db.com.de

Wie kann man von Angularjs inline-template mit script-Tag auf console.log drucken?

Ich probiere die Inline-Vorlage von Angular.js aus. Ich hätte gerne eine Möglichkeit, Angular-Objekte zu debuggen, indem ich auf der Konsole drucke, wenn eine HTML-Seite gerendert wird.  

Die Inline-Vorlage fügt HTML-Vorlagen in Skript-Tags ein. Zum Beispiel:

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

Es ist schwierig, weil das Zeug in den Skript-Tags nicht mehr wirklich JavaScript ist. Ich weiß also nicht, wie man mit der Inline-Vorlage auf die Konsole innerhalb der HTML-Seite.html druckt.  

Ich habe es versucht, aber ein Skript-Tag konnte nicht geschachtelt werden:

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

Ich habe auch versucht, nur ein blankes console.log zu werfen, da es sich in einem Skript-Tag befindet.

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

die gesamte Zeile console.log("this entire line gets output as text on the html page"); wird jedoch auf die HTML-Seite gedruckt, nicht auf die Konsole!

13
Melissa

Sie können dies erreichen, indem Sie einige der im Controller-Bereich definierten Debugging-Funktionen mit ng-init in der Vorlagendefinition aufrufen. Siehe dieses Beispiel .

Nehmen wir an, die Vorlage wird von definiert

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

und Sie haben einen Controller definiert als

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

dann

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

sollte in der Konsole drucken

In der Vorlage: 0
In der Vorlage: 1
In der Vorlage: 2

Der ng-init wird jedes Mal aufgerufen, wenn eine Vorlage instanziiert wird. Ich protokolliere nur einige Werte, die im Gültigkeitsbereich verfügbar sind, wie beispielsweise $index, der Index in der ng-repeat-Schleife.

Siehe dieses Beispiel .

14
T.Gounelle

Mit der obigen Antwort fand ich Folgendes einfacher. 

Die einfachste Lösung für mich war, temporär $scope.console = console in meinem Controller zu setzen, sodass die Vorlage über die window.console-Bindung wie üblich Zugriff auf die globale Variable $scope und die zugehörigen Funktionen hat

Da die Vorlagen eng begrenzt sind, haben sie keinen Zugriff auf globale Variablen und Fenstervariablen. Daher ist console.X() nicht in der Vorlage verfügbar. Wie Sie wahrscheinlich bereits erlebt haben, führte der Versuch, nicht definierte Werte aus der Vorlage heraus zu referenzieren, nicht zu einem Fehler, sondern nur zu nichts. (Cue reißt die Haare heraus und versucht herauszufinden, warum die Ereignisse nicht schießen.)

1
mix3d