Angular Directive Scope Binding Types

When creating an AngularJS directive, most of the time we want to pass some sort of data to that directive where it is implemented. Of course, Angular gives us multiple ways to do so. Let’s try to make sense of the different binding types: “@”, “=”, and “&”.

(Related: AngularJS Directive’s ‘Restrict’ Real World Guide)

Let’s first lay out our directive definition:

function DemoDirective(){
return {
restrict: 'E',
scope: {
stringBind: '@',
objectBind: '=',
functionBind: '&'
template: [
'<p>Hello, {{vm.stringBind}}! Please order donuts:</p>',
'<p>Quantity: <input ng-model="vm.objectBind"></p>',
'<p><button ng-click="vm.functionBind()">Order Donuts!</button>'
controller: 'DemoDirectiveController',
controllerAs: 'vm',
bindToController: true

In this directive, our controller will have three things bound to it, vm.stringBind, vm.objectBind, and vm.functionBind because our directive’s scope definition looks like this:

stringBind: '@',
objectBind: '=',
functionBind: '&'

‘@’: The first binding is stringBind and allows us to pass a string to our directive. This binding in one way, it only flows from parent to directive. But, it can be updated multiple times (don’t confuse this with one-time binding).

‘=’: The next binding is objectBind and it allows us to point to the same object from the parent to the directive. In addition to parent changes being passed to the directive, whenever this object is changed on the directive, the parent will receive the update as well since they are both referencing the same object.

‘&’: The final binding type is functionBind. This allows us to call parent functions directly from the directive. This way, if you need the directive to trigger a function on the parent, you can just call vm.functionBind().

I’ve created a live example of a directive that uses all of these types. In the example, you’ll find we pass the user’s name as a string binding (since that won’t change from the directive). We also pass an object binding to the donuts ordered amount object. This object will be what our directive modifies after the user places their order. Finally, we’ll bind our order function to let the parent know that our donuts were ordered.

JSBin Directive Example: Donut Order

Hope this helps! Feel free to reach out on Twitter (@AdamWeeks) or hang out on Angular Buddies slack group!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s