Wie kann ich debug/dump einen Wert aus einer ng-bind {{ }} Winkel-Ausdruck?

Ist es ein guter Weg, um Sie dump oder überprüfen Sie die Ergebnisse von einem Ausdruck? Manchmal, wenn ich

{{some_expression}}

nichts zeigt sich auf der Seite wo das Ergebnis dieses Ausdrucks erscheinen sollte. Wie kann ich feststellen, ob der Ausdruck, der zurückgegeben wird ein null eine undefined oder eine leere Zeichenfolge ''?

Wenn es ein normales Objekt, wie diesem, wird es zeigen, eine nette Programmierer-freundliche Darstellung des Objekts, das ist toll:

{{ {'a': 1} }}

Aber wenn Sie versuchen zu inspizieren, um einen Ausdruck zu null, nicht definiert oder ", Sie sind alle nicht zu unterscheidend von einander!

{{null}}
{{undefined}}
{{''}}

Also, wie können Sie sagen, welche es war??

Versuchte ich mit JSON.stringify:

{{ JSON.stringify(null) }}

aber JSON scheint nicht verfügbar zu sein von schräg Ausdruck ist, denn es ist eine Methode, die von window und nicht eine Eigenschaft des scope (siehe stellt sich die Frage, über die der Zugriff auf Methoden von Fenster).

Versuchte ich mit typeof:

typeof {}: {{ typeof {'a': 1} }}

aber es führt zu einem Fehler:

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 9 of the expression [ typeof {'a': 1} ] starting at [{'a': 1} ].

So, wie ich es bekommen kann-dump, den Wert in die Vorlage mit so etwas wie JSON.stringify (... oder console.log)?

Allgemein gesprochen, ist es ein guter Weg, um debug-Angular-Ausdrücke anderes als trial and error? Seit Eckige Ausdrücke sind also "vergeben", Sie scheinen nicht zu erhöhen, Fehler; Sie nur schweigend zu schlucken, die die Fehler und zurück undefined:

In JavaScript, und versuchen, zu evaluieren, nicht definierte Eigenschaften erzeugt
ReferenceError oder TypeError. Im Winkel, der Auswertung eines Ausdrucks ist
vergeben, undefined und null.

Aber ohne zu sehen, eine Art von Fehlermeldung, wie wollen Sie wissen, welcher Teil des Ausdrucks Eckige hatte Probleme mit?

Sie können auch direkt auf die Zuschauer von einem Umfang und ausführen. Nachdem alle {{ expression }} kompiliert, um eine Funktion, die Sie ausführen können. Auch Sie sollten haben eine sehr einfache Logik, die in eckigen Klammern befindlichen Ausdrücke.

InformationsquelleAutor Tyler Rick | 2014-04-04

angularjs

25

Können Sie einen benutzerdefinierten filter für debugging-Zwecke:
```
app.filter('debug', function() {
  return function(input) {
    if (input === '') return 'empty string';
    return input ? input : ('' + input);
  };
});
```
Verwendung:
```
{{ value | debug }}
```
Demo: http://plnkr.co/edit/U44BCjBhgsFedRkHASlc?p=preview
- alternative: return function(input) { console.log(JSON.stringify(Eingabe)); return Eingabe; }
InformationsquelleAutor tasseKATT
11

Ist der empfohlene Weg ist die Verwendung von AngularJS logging-service $log. Zuerst müssen Sie, um zu injizieren, der den service in Ihrem controller, und weisen Sie eine scope-variable wie folgt:
```
app.controller('MyCntrl', function($log){
    $scope.$log = $log;
```
Dann in Ihre Vorlage, wir, die es wie ay andere Funktion:
```
<span>{{$log.log(value}}</span>
```
Wenn Sie möchten, nutzen zu können, typeof, es funktioniert im Grunde die gleiche Weise:
```
$scope.getTypeOf = function(val){ return typeof val; };

<span>{{getTypeOf(val)}}</span>
```
InformationsquelleAutor km6zla
2

Basierend auf tasseKATT's und ogc-nick's Super Antworten, ich habe diese zwei Filter. Sie sind in CoffeeScript geschrieben, aber hier ist das JavaScript äquivalent, wenn Sie bevorzugen. Posting hier im Fall ist es hilfreich, jemand anderes...
```
.filter 'debug', ->
  (input) ->
    if typeof input is 'undefined'
      'undefined'
    else
      JSON.stringify(input)

.filter 'typeof', ->
  (input) ->
    typeof input
```
Nun kann ich einige sinnvolle debugging-Ausgabe von jedem der folgenden Ausdrücke:
```
  {{null | debug}}
  {{undefined | debug}}
  {{'' | debug}}
```
InformationsquelleAutor Tyler Rick
0

Wenn Sie Chrome verwenden, können Sie versuchen, die Batarang - Erweiterung, die Ihnen Einblick in die Eigenschaften Ihrer Modelle. Zugang durch öffnen der Entwickler-Konsole (STRG+SHIFT+I) und dann sollten Sie einen Batarang tab. Klicken Sie auf aktivieren und dann bekommst du eine Auflistung aller Winkel-Modelle auf Ihrer Seite. Sie werden nicht intuitiv benannt, aber Sie können durch Sie ableiten, welche sind die.

Haben Sie versucht, indem Sie die console.log() im inneren der Doppel-curlies? Das könnte auch funktionieren, wenn Sie wollen einfach nur eine schnelle und faule Methode.
- Danke, Sergej. Ja, ich nutze den Batarang Erweiterung manchmal, aber in diesem Fall ich wollte etwas, dass ich verwenden könnte, zu Debuggen direkt in meine {{ }}. Ja, ich habe versucht {{ console.log('a') }}, aber nichts zeigt sich in der Konsole, wenn ich das mache, und nichts zeigt sich als Ausgang aus der {{ }} entweder (zurück undefined).
InformationsquelleAutor Sergey K
0

Den JsonPipe könnte einfacher sein...
```
{{ object ! json }}
```
Finden Sie unter: https://angular.io/api/common/JsonPipe

InformationsquelleAutor Daniel Sauvé

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.