ИМХО, наиболее неприятный опыт возникает при получении / установке значения определенной области, связанной с визуальным элементом. Я устанавливал много точек останова не только в собственном коде, но и в самом angular.js, но иногда это просто не самый эффективный способ. Хотя приведенные ниже методы очень эффективны, они определенно считаются плохой практикой, если вы действительно используете их в производственном коде, поэтому используйте их с умом!
Получите ссылку в консоли из визуального элемента
Во многих браузерах, отличных от IE, вы можете выбрать элемент, щелкнув его правой кнопкой мыши и выбрав «Проверить элемент». В качестве альтернативы вы также можете щелкнуть любой элемент, например, на вкладке «Элементы» в Chrome. Последний выбранный элемент будет сохранен в переменной $0консоли.
Получите область действия, связанную с элементом
В зависимости от того, существует ли директива, которая создает изолированную область видимости, вы можете получить эту область с помощью angular.element($0).scope()или angular.element($0).isolateScope()(используйте, $($0).scope()если включен $). Это именно то, что вы получаете, когда используете последнюю версию Batarang. Если вы изменяете значение напрямую, не забудьте использовать scope.$digest()для отражения изменений в пользовательском интерфейсе.
$ eval - это зло
Не обязательно для отладки. scope.$eval(expression)очень удобно, если вы хотите быстро проверить, имеет ли выражение ожидаемое значение.
Отсутствующие члены прототипа области видимости
Разница между scope.blaи scope.$eval('bla')в первом случае не учитывает унаследованные от прототипа значения. Используйте приведенный ниже фрагмент, чтобы получить полную картину (вы не можете напрямую изменить значение, но вы все $evalравно можете использовать !)
scopeCopy = function (scope) {
var a = {};
for (x in scope){
if (scope.hasOwnProperty(x) &&
x.substring(0,1) !== '$' &&
x !== 'this') {
a[x] = angular.copy(scope[x])
}
}
return a
};
scopeEval = function (scope) {
if (scope.$parent === null) {
return hoho(scope)
} else {
return angular.extend({}, haha(scope.$parent), hoho(scope))
}
};
Используйте его с scopeEval($($0).scope()).
Где мой контроллер?
Иногда вам может потребоваться отслеживать значения, ngModelкогда вы пишете директиву. Используйте $($0).controller('ngModel')и вы получите , чтобы проверить $formatters, $parsers, $modelValue, $viewValue $renderи все.