Defining a Method on the Scope

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 11 years ago
Updated 6 years ago

Armed with Controllers and service factories, you'll probably want to do some work on the data to give your app behaviors. In this video we will look at providing that behavior by defining a method on the scope. This method will be bound within the HTML and update live as input changes.

John Lindquist: Defining a method on your controller or on the scope in your controller is actually pretty straightforward. We'll just define a method called "reversed message," and this will be the function that returns scope data message. I'll split it up and reverse it, and then join it back together.

Then all we'll do in here is instead of saying, "data message," we'll invoke our method and say, "reversed message." We should be set up, so this is reversed. Now you can see it says, "This is reversed." That's really all you need to do, is just to find a method on your scope, give it a function that does something.

What I want to show you here that I see a lot of people do, is as much as possible, you don't want to reference the scope inside of a function, because we can really extract this out and pass in the message into our reversed message. We'll say, "We will pass in the data message," and then this can be just be "message," because we can pass in our message here.

That removes the dependency of the scope inside of our function, and makes it easier to test and all that sort of stuff.

You can see it works just the same as it always did. But now instead of having this scope dependency inside of your method here, you're just passing in the value into your method. So, much cleaner, a much better way of approaching that. Again, just message, message, and it returns our value.

It's just going to update that and do that check any time it sees the scope change, so that should be often enough for things like binding. If one of the scope models changes, it will revoke this reverse message function as well. So, there you go.

Joel Hooks
Joel Hooks
~ 9 years ago

We update the code example and add annotations. We won't be updating the video for this lesson, preferring to work on new content.

It is greatly appreciated when comments are added that explain the specific issues in lessons when discovered to let others know what's up. There's only two of us here at egghead, and we do what we can.

roberto
roberto
~ 9 years ago

Hi Joel,

I'm also starting to realize the out-of-date videos as well- because I am not sure how to quite follow along properly.

Would you recommend to still watch these videos to get a basic gist of this and hopefully the intermediate vids clear up the confusion ?

Any advice on how to proceed would greatly be appreciated ! :)

Rodrigo
Rodrigo
~ 9 years ago

I want to adhere to the requests above. I'm newbie to this, and it was sort of confusing when watching these videos, which are part of the "New To Angular? Start Learning Here?"

I've paid for this service, it would be nice that at least you could be taking care of the newbies. Experienced people could automatically realize of an outdated example and just go on, or even understand why it is outdated. For Newbies, it's just confusing and holds back the advance on the learning process.

Paul
Paul
~ 9 years ago

There is a jump from the revamped previous videos introducing states and services and this, which uses a factory. Very confusing.

The very principle of your training paradigm, "simple step by step tutorials" is broken here.

Markdown supported.
Become a member to join the discussionEnroll Today