Bloom Lab: Angular Recipe: Passing data into your Directive

Friday, October 16, 2015

Angular Recipe: Passing data into your Directive

Angular JS

It's often needed to pass some data into your directive from outside.

By default, directives are restricted to attribute 'A' type and are therefore restrict: 'A' is redundant.

Inside directives, it is best practice to use controller only when you want to share functions with other directives. All other times you should use link.

If a directive is only returning the link function you can write it as just return anonymous function: return function(scope, element, attr) {/*...*/};

## Bind the Data to our scope
There are 3 options when binding data to an isolate scope:

* **@** - Attribute string binding;  
Binds a local/directive scope property to the evaluated value of the DOM attribute. So, u can use it with simple string values as well as with evaluated values `{{}}`
* **=** - Two-way model binding;  
Binds a local/directive scope property to a parent scope property. So, u cant' use it with `{{}}`
The binding is bidirectional that allows the local/directive scope and the parent scope to share data.
* **&** - Callback method binding.  
Use it if you don't need to share data with the parent, but you just want to call a function defined in the parent scope.

@see details in [Keynote: AngularJS Do the custom things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-custom-things.html)

----
## Bind the Data between composite directives

Imagine that you have some product card *(or review note)* directive which you want to use in any places e.g. create & update form.  
He is where advantage of the two way binding with your isolated appears.

* Separate the product data request from your reusable directive;
* Request & Receive the data into your parent scope;
* Create your directive isolated scope;
* Bind the directive isolated scope value with the outside one;
* Pass the item from the outside in the custom directive html node;

**UseCase1:** U have some view that contains the list of *item cards*.   
You request the all items data via some service or `$http.get` directly in the your view controller.
Then you just pass each item data to your *item cards* isolated scope.
Here we are any change via main *view* immediately reflects in the *item card*.

*card.js*

angular.module('myApp')
    .directive('myItemCard', function () {
        return {
            restrict: 'E',
            templateUrl: 'templates/my-item-card.html',
            // create the directive own scope
            scope: {
                // two way binding with 'product' passed from the parent scope
                item: '='
            },
            controller: function ($scope) {
                /*card logic*/
            }
        }
    });

*my-item-card.html*

<div class="itemCard">
        <h2>
            {{item.category}} {{item.name}}
            <small>
              <em>(#{{item.id}}<span ng-show="item.available"> by it now</span>)</em>
            </small>
        </h2>
        <blockquote>
           {{item.description}} - <em>{{item.date | date: 'h:mma'}}</em>
        </blockquote>
    </div>

*index.html*

<div ng-repeat="product in products">
        <my-item-card item="product"></my-item-card> 
    </div>

**UseCase2:** U have some view that contains *update form* & *item card*.   
You request the item data via some service or `$http.get` directly in the your view controller.
Then you just pass it to your *update form* & too the *item card*.
Here we are any change via *update form* immediately reflects in the *item card*...

----
## Access to parent directive controller
There is possibility to interact with your parent controller directive via `require` property.
IMHO, the using of two-way binding *("=")* creates less coupling than following approach:

angular.module('MyApp')
    .directive('myNavItem', function() {
    return {
        restrict: 'E',
        templateUrl: './templates/directives/my-nav-item.html',
        require: '^myNavBar',
        link: function(scope, element, attrs, myNavBarCtrl) {
           scope.isActive = function() {
               return scope.name == nwNavCtrl.getActiveNav();
           };

scope.activate = function() {
               nwNavCtrl.setActiveNav(scope.name);
          };
        },
        scope: { name: "@"}
      };
    });

*my-naw-item.html*

----  
## see Also
* [Keynote: AngularJS Services](http://bloomlab.blogspot.com.ee/2015/10/keynote-angularjs-services.html)
* [Keynote: AngularJS Filters](http://bloomlab.blogspot.com.ee/2015/10/ketnote-angularjs-filters.html)
* [Keynote: AngularJS Routing](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-routing.html)
* [Keynote: AngularJS Do the custom things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-custom-things.html)
* [Keynote: AngularJS Do the regular things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-regular-things.html)
* [Keynote: AngularJS Basics](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-basic-short-notes.html)
* [AngularJS - API](https://docs.angularjs.org/api/ng)
* [AngularJS - Developer Documentation](https://docs.angularjs.org/guide)
* [AngularJS - Receipes with Angular](http://fdietz.github.io/recipes-with-angular-js/)
* [AngularJS - Receipes github](https://github.com/fdietz/recipes-with-angular-js-examples)
* [Tutorials Point - AngularJS](http://www.tutorialspoint.com/angularjs/angularjs_directives.htm)
* [Tutorials Point - BestPractices](http://www.tutorialspoint.com/developers_best_practices/index.htm)
* [Keynote: Top JS frmeworks 2015](http://bloomlab.blogspot.com.ee/2015/03/top-javascript-frameworks-2015.html)