ng-bind {{}} 각도식에서 값을 디버깅/덤핑하려면 어떻게 해야 합니까?

ng-bind {{}} 각도식에서 값을 디버깅/덤핑하려면 어떻게 해야 합니까?

식의 결과를 덤프하거나 검사하는 좋은 방법이 있습니까?가끔 그럴때면

{{some_expression}}

, 해당 식의 결과가 표시되어야 하는 페이지에 아무것도 표시되지 않습니다.식을 반환했는지 여부를 확인하려면 어떻게 해야 합니까?null, 가.undefined, 또는 빈 문자열''?

이와 같이 정상적인 물체라면, 이 물체를 프로그래머에게 친숙하게 표현한 것을 보여줄 것이고, 이는 훌륭합니다.

{{ {'a': 1} }}

그러나 null, undefined 또는 '로 평가되는 식을 검사하려고 하면 모두 구별할 수 없습니다!

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

그게 어떤 건지 어떻게 알 수 있죠?

사용해 보았습니다.JSON.stringify:

{{ JSON.stringify(null) }}

그렇지만JSON각도식에서 사용할 수 없는 것 같습니다. 왜냐하면 그것은 다음의 방법이기 때문입니다.window범위의 속성이 아닙니다(창에서 메서드에 액세스하는 방법에 대한 관련 질문 참조).

사용해 보았습니다.typeof:

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

그러나 오류가 발생합니다.

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

그러면 어떻게 하면 다음과 같은 것을 사용하여 값을 템플릿에 덤프하도록 할 수 있습니까?JSON.stringify(… 또는console.log)?

---

일반적으로 시행착오 외에 Angular 식을 디버깅할 수 있는 좋은 방법이 있습니까?각진 표현들은 너무 "용서"하기 때문에 오류를 일으키는 것 같지 않고 그저 묵묵히 오류를 삼키고 돌아올 뿐입니다.undefined:

자바스크립트에서 정의되지 않은 속성을 평가하려고 하면 ReferenceError 또는 TypeError가 발생합니다.Angular에서 식 평가는 정의되지 않은 값과 null 값을 사용하지 않습니다.

하지만 어떤 종류의 오류 메시지가 보이지 않으면서, Angular라는 표현의 어떤 부분이 문제가 있었는지 어떻게 알 수 있습니까?

디버깅 목적으로 사용자 지정 필터를 추가할 수 있습니다.

app.filter('debug', function() {
  return function(input) {
    if (input === '') return 'empty string';
    return input ? input : ('' + input);
  };
});

용도:

{{ value | debug }}

데모: http://plnkr.co/edit/U44BCjBhgsFedRkHASlc?p=preview

권장 방법은 Angular를 사용하는 것입니다.JS의 벌목 서비스$log. 먼저 서비스를 컨트롤러에 주입하고 다음과 같은 범위 변수에 할당해야 합니다.

app.controller('MyCntrl', function($log){
    $scope.$log = $log;

그런 다음 템플릿에서 다른 기능처럼 사용합니다.

<span>{{$log.log(value}}</span>

유형을 사용하려면 기본적으로 다음과 같은 방식으로 작동합니다.

$scope.getTypeOf = function(val){ return typeof val; };

<span>{{getTypeOf(val)}}</span>

내장된 Json Pipe가 더 쉬울지도...

{{ object | json }}

참조: https://angular.io/api/common/JsonPipe

타세KA기준TT와 ogc-nick의 훌륭한 답변, 이 두 개의 필터를 추가했습니다.커피스크립트로 작성되어 있지만 원하시면 여기 자바스크립트와 동등한 것이 있습니다.다른 사람들에게 도움이 될 경우를 대비해서 여기에 글을 올리는 건...

.filter 'debug', ->
  (input) ->
    if typeof input is 'undefined'
      'undefined'
    else
      JSON.stringify(input)

.filter 'typeof', ->
  (input) ->
    typeof input

이제 다음 식에서 의미 있는 디버깅 출력을 얻을 수 있습니다.

  {{null | debug}}
  {{undefined | debug}}
  {{'' | debug}}

Chrome을 사용하는 경우 모델의 특성을 검사할 수 있는 Batarang 확장을 사용해 볼 수 있습니다.개발자 콘솔(CTRL+SHIFT+I)을 열어 접속하면 Batarang 탭이 나타납니다.활성화하려면 클릭해야 하고 페이지에 있는 모든 Angular 모델 목록을 확인해야 합니다.직관적으로 이름이 붙지는 않지만 클릭해서 어떤 것이 어떤 것인지 추론할 수 있습니다.

당신은 그것을 넣어보셨나요?console.log()더블커리 안에?그것은 또한 당신이 빠르고 게으른 방법을 원한다면 효과가 있을지도 모릅니다.

언급URL : https://stackoverflow.com/questions/22867226/how-do-i-debug-dump-a-value-from-an-ng-bind-angular-expression