AngularJSを使用して開発を行っている際、$scope
やcontroller
に格納されている値を確認したいというケースがよくあります。そのような時、<pre>
と json
フィルタを使用するとUI上で値を簡易的に確認することができます。以下に例を示します。
Controller
angular
.module('app', [])
.controller('mainController', function($scope) {
var vm = this;
$scope.value1 = {
name: '$scope',
text: 'This is $scope value.'
}
vm.value2 = {
name: 'controller',
text: 'This is controller value.',
};
})
View
<div ng-controller="mainController as main">
<pre>{{value1|json}}</pre>
<pre>{{main.value2|json}}</pre>
</div>
また、こちらの記事も参考になります。
AngularJSで便利なChromeデバッグTips