In this video Iftach Bar shows how to get the $scope object when the browser is open straight from the console.
- [Instructor] In this chapter, we're going to cover some interesting tips you can use when you're trying to find a bug in an application or when you want to improve its performance. Sometimes, when something is not working, you'd like to debug it in real time instead of looking at your code and trying to understand what went wrong. This is why we use a debugger, to see the context in a specific moment. Stopping in the certain point in your code is not always enough when we're dealing with angular.
A lot of times, you want to have a look at the state of different variables under different scopes. There is a cool trick I like to use to gain the scope of a certain element in order to explore the data and their datascope. First, we'll choose an element that is in the scope we want to explore and then we will right click and inspect it. I'm choosing the input field here. So, right click and inspect the element.
I can see from highlighting the element in the Elements tab. Then, we'll go to the Console tab. Google Chrome has a special variable that holds the current inspect element named $0. To get the scope around the certain element we can type angular.element. And, I'll pass it with $0 which is inspected element currently. Running this will give us an angular wrapper of that specific element.
Now that we have an angular element, we can use a function called scope. The function will return the scope of this element, so I'm going to type it again. angular.element on $0.scope If we open the scope we can see all the built in variables and functions this scope has. We're more into the vm variable, which is the controller that holds all our specific application data.
We can see all the variables on the vm and their values. This method allows us to investigate the state of the application and sometimes catch some difficult bugs. For example, the bug we've seen in the previous video when we click the Bad Button and we don't see the binding in the playground controller change we can try to investigate it now by right clicking this specific element, clicking Inspect, going to the console, running angular.element $0 scope, looking at the vm and seeing the value of dream.
When I see that the value of dream is nightmare and I see that the binding hasn't changed, I can understand that probably the thing that went wrong was that the digest wasn't called for some reason. angular.element can be used without inspecting a certain element. We can just replace the $0 with whatever element we can find. Combining with jquery selectors can be very powerful. For example, we can write angular.element on $, which is jquery and I'm going to query all the input fields.
If you don't know jquery, that's fine. You just skip the end of this video. But, if you do know, you can understand what $ input does exactly. I'm getting the scope of the element around the input which should provide us with the same results of inspecting the input field instead of just querying it with jquery. As we can see, it's the same scope or the same vm. And, that's it.
This advanced AngularJS course helps you explore the connected worlds of $scope and the digest cycle. Instructor Iftach Bar explains scope and inheritance, goes behind the scenes of the digest loop, and teaches both manual and automatic data binding approaches. Plus, learn how to integrate external libraries, diagnose performance issues, and debug your applications.
- $scope and controllers
- $scope built-in variables and methods
- $scope prototype inheritance
- Manual data binding with $scope.$watch
- The digest loop
- Get the $scope in the console
- Forcing $digest