7

I have the following code 

<span ng-show="form.email.$error.unique">Email already exists</span>

This is working correctly and I am able to see the span element if the email entered in the "email" input field already exists in our db.

However if I go into chrome console. and then type

form.email.$error

it says undefined.

I can type in 

form.email

and it shows me 

​<input name=​"email" ng-model=​"model.email" required class=​"ng-dirty ng-invalid ng-invalid-unique">

So the question is why can't I see $error in chrome console? this value definitely exists because angular is reading it and based on the value it is deciding whether to show the span or not.

Edit:: Upon further reading documentation, I feel that the directive which checks whether email is valid or not... sets the validity on the controller object (4th parameter . $setValidity )

but somehow the UI reads that $error from the UI element .

so that's very confusing as to what is the actual workflow... where is the $error being set and from where it is being read.

Can someone clarify this?

Dan Mindru
  • 5,986
  • 4
  • 28
  • 42
Knows Not Much
  • 30,395
  • 60
  • 197
  • 373
  • I'm unsure how to do it with the console, I would just output that variable to the browser above the span. – Jhecht Sep 10 '14 at 01:13
  • When you type form.email in the console it's showing you an element from the DOM, which doesn't have an $error property. Angular creates a FormController and attaches that to the scope. That form controller is what defines the $error property. – Sunil D. Sep 10 '14 at 03:17

2 Answers2

5

Instead of debugging in the console, a useful technique to use is to just output the variable in the view:{{form.email.$error.unique}}. Put this above or below your input element and watch the value dynamically change as you type into it.

user12121234
  • 2,519
  • 2
  • 25
  • 27
  • yes I can do that... but I still want to know how to access the value from the console. – Knows Not Much Sep 10 '14 at 18:03
  • Also.. what I am fundamentally not clear on... is that the directive is setting the $setValidity on the controller object. and the ng-show is reading it from the form.elem.$error. So what I don't understand is how are these two connected. – Knows Not Much Sep 10 '14 at 22:42
  • This might work to access form.email.$error.unique from the broswer console (using jQuery): $('form[name="formName"]').scope().form.email.$error.unique; Check out this: page:http://stackoverflow.com/questions/13743058/how-to-access-the-angular-scope-variable-in-browsers-console – user12121234 Sep 10 '14 at 23:13
5

Download the AngularJS Batarang Plugin for Chrome. After enabling it you can inspect any element and in the console $scope will be the scope of the selected element.
You can then inspect your mentioned span and type in console $scope.form.email.$error.uniqueand you'll get the current value of it.

Alternatively if you dont want to install that plugin (I would prefer installing it) you can get via javascript the current scope like angular.element(document.getElementById(...)).scope() and then inspect that scope.
(Of course you can get the element on other ways then per document.getElementById(...))

L. Monty
  • 872
  • 9
  • 17
  • without this, it is not possible to get accesss to variables defined in angular funtions (directive,service,factory,controller) – Mephiztopheles May 13 '15 at 13:08
  • I find myself in the unfortunate circumstance of needing to diagnose a bug in a legacy AngularJS 1.8.2 app in production, so adding debug output to the view is not an option for me. I tried both of these methods (as well as several other plugins), and scope is always `undefined`. Any suggestions? Should these tools and techniques still work in 2023? – JakeRobb Feb 23 '23 at 20:34
  • 1
    Aha! If I first call `angular.reloadWithDebugInfo()` from my console, all of these tools and techniques work! – JakeRobb Feb 23 '23 at 21:21