If you are using the "controller as" syntax, and you should be using the "controller as" syntax, you will want it to be **consistent** in your Angular state modules as well as your Angular component directives. With the `bindToController` property on the directive definition object, this is easy to accomplish.

New in Angular 1.3 - bindToController

[00:01] bindToController is a new feature in directives in Angular 1.3. To demonstrate it, let's set up a note with a message of "hello." In our directive, we'll call this "note" and return our directive object with a template of "Hello there!" When we refresh, you can see our template works just fine. 

[00:34] To pass in the message, we'll need to set up a scope. It says, "message." It's a string. Then we can replace this content here with double curlies and message. We'll refresh. Now it just says "hello" because the content in this attribute is being passed to this scope and automatically available in the template.

[00:57] The way bindToController works...bindToController, true...is if you want to use controllers, instead of a link function, usually, in your directives. We'll call this "NoteCtrl as note." It's important to use the "controller as" syntax.

[01:19] Then we'll set up the note controller. Now that we have the note controller set up, we can just use the "controller as" way of accessing this message. I can say "note.message." When I refresh, you can see this still works.

[01:46] If I delete this bindToController line and refresh, you can see it's gone because note doesn't have a property of message on it. If I restore it, refresh, you can see that bindToController is taking everything on the scope and automatically exposing it on the "controller as" reference right there.

[02:10] Basically, this saves you from setting up a more complex way of using a linking function and passing into controller, passing in the scope, assigning everything off the scope onto the controller, which would just be a lot of code.

[02:22] If you're going to use this approach, and I recommend that you do, I strongly recommend that you set up a snippet or live template for this. I'll just show it in WebStorm real quick. I'm going to grab this entire block here and say, "Save as Live Template." That's just under the Tools menu.

[02:41] We'll call this guy "dircon" or something. Name it whatever you want. I'll replace all these notes with name. I'm going to copy that, paste there, paste there, paste there. These upper-case notes, I'll call it "uppercaseName." Copy this, paste there, and paste there. Looks like I missed one. Copy, paste.

[03:17] To have WebStorm automatically upper-case for us, I'll go into the "Edit variables." In the uppercaseName expression, I'll choose capitalize and say "I want you to capitalize name."

[03:32] When I save this, hit OK, delete all of this, say "dircon," and hit Tab, you can see it generates the whole thing. I can just say "note." That writes out everything that I type before note. Note. NoteCtrl. NoteCtrl. NoteCtrl.

[03:52] If I wanted to create another directive called "pad" or something, I could just say "pad" and easily just come in and say "pad" with a message of "sweet." Hit refresh and done.

New in Angular 1.3 - bindToController

Share this video with your friends