Подтвердить что ты не робот

Как мне отладить/выгрузить значение из выражения ng-bind {{}} Angular?

Есть ли хороший способ сбрасывать или проверять результаты выражения? Иногда, когда я делаю

{{some_expression}}

на странице, где должен появиться результат этого выражения, ничего не отображается. Как определить, вернули ли выражение null, a undefined или пустую строку ''?

Если это обычный объект, он будет показывать приятное для программиста представление объекта, что отлично:

{{ {'a': 1} }}

Но если вы попытаетесь проверить выражение, которое оценивает значение null, undefined или '', все они неотличимы друг от друга!

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

Итак, как вы можете определить, какой из них был?

Я попытался использовать JSON.stringify:

{{ JSON.stringify(null) }}

но JSON кажется недоступным из выражения Angular, потому что это метод из 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, отличные от проб и ошибок? Поскольку Angular выражения настолько "прощаются", они, похоже, не вызывают ошибок; они просто проглатывают ошибки и возвращают undefined:

В JavaScript пытается оценить свойства undefined. ReferenceError или TypeError. В Angular оценка экспрессии прося undefined и null.

Но, не видя какого-либо сообщения об ошибке, как вы знаете, с какой частью выражения Angular возникли проблемы?

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете добавить настраиваемый фильтр для целей отладки:

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

Ответ 2

Рекомендуемый способ - использовать службу ведения журнала AngularJS $log. Сначала вам нужно ввести службу в свой контроллер и назначить ее переменной области видимости следующим образом:

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

Затем в вашем шаблоне нам это нравится другая функция:

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

Если вы хотите использовать typeof, он работает в основном таким же образом:

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

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

Ответ 3

На основе tasseKATT и ogc-nick отличных ответов я добавил эти два фильтра. Они написаны на CoffeeScript, но здесь эквивалент JavaScript, если вы предпочитаете. Проводка здесь, если это полезно кому-то еще...

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

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

Теперь я могу получить осмысленный отладочный вывод из каждого из следующих выражений:

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

Ответ 4

Если вы используете Chrome, вы можете попробовать расширение Batarang, которое позволяет вам проверять свойства ваших моделей. Откройте его, открыв консоль разработчика (CTRL + SHIFT + I), а затем вы увидите вкладку Batarang. Вам нужно щелкнуть, чтобы включить, а затем вы должны получить список всех моделей Angular, представленных на вашей странице. Они не будут интуитивно названы, но вы можете щелкнуть их и вывести, какие из них.

Вы пробовали поставить console.log() внутри двойных колен? Это может также работать, если вы просто хотите быстрый и ленивый метод.