This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Accessing Scope from The Console

    John LindquistJohn Lindquist

    The Chrome Dev Tools console is an amazing tool. In this lesson you'll learn how to use the console to programmatically grab scopes in your AngularJS application.

    angularjsAngularJS
    chromeChrome
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    John: Using Angular, you can actually access the scope and other things from the console, so when you have a live web page, you can dive in and grab things out of the scope and modify them and whatnot.

    I'm going to demonstrate this on the AngularJS homepage to show that there's no trickeration going on. I'm going to open the dev tools. I'll switch over to the elements. I'm going to select this input element here and then open my console.

    $0 is a shortcut for the selected element in your elements. You can see it's the input when I type out "$0." The way to get the scope off of that element is by typing "angular element" and then wrapping the $0 and then typing "scope." That will return the scope. I'll press Up and assign a scope variable to that so that we can modify it.

    On this example, you can see there is a your-name model. That's what we want to modify. If I say "scope your-name" and set that to "Bill," hit Enter, you can see that your-name is now set to "Bill." It's just that because we've done this outside of Angular, it hasn't run that whole scope/apply/digest cycle, so we have to call that manually ourselves.

    I can say "scope apply" and, once I hit Enter, check the input field. Then you'll see that it automatically updated to "Bill." Just to show that again, I'll say "scope your-name = 'The Flash'," then hit Enter and say "scope apply." You'll see, hello, "The Flash."

    Discuss

    Discuss