AngularJS Directive Controllers

AngularJS Directive Controllers

Directive Controller is advanced feature of AngularJS. It's name describe it all. It is combination of Directive elements with Controller object.

It is mainly used for creating domain specific or modern web controls. Common examples of web controls are custom tabs, dynamic menu list, Auto-suggest list items. which is used frequently in today's modern web applications.

Three things to remember for creating Directive Controller!

  1. controllerAs is used for convert directive into directive controller. Other methods of creating directive remains same.
    controllerAs: 'tabsCtrl'
  2. link or controller is used for creating functions and event listener  in directives.
    link: function(scope, element, attr) {}
    controller: ['$scope', function($scope) {}]

    Only difference using controller is when we want to communicate other directives. In other word expose directive's function to other directives.

  3. transclude is used for wraps outside $scope objects into current directive.
    transclude: true;

Example

/*
app.js
directive controller
*/
'use strict';

angular.module('myApp', [])

.directive('tabs', function() {
  return{
      restrict: 'E',
      transclude: true,
      templateUrl: 'tabs.html',
      // controller function
      controller: ['$scope', function($scope) {
        var tabs = [],
                  selected = null,
                  previous = null;
        $scope.tabs = tabs;

        $scope.selectedIndex = 0;
        $scope.selectTab = function(tab) {
          $scope.tabs.previous = $scope.tabs.selected;
          $scope.tabs.selected = tab;

          $scope.selectedIndex = tab;
        };

        $scope.isSelected = function(tab) {
          return $scope.selectedIndex === tab;
        };

        $scope.addTab = function(tab) {
          if (tabs.indexOf(tab) == -1) {
            $scope.tabs.push(tab);
          }
        };

        $scope.removeTab = function (tab) {
          var index = $scope.tabs.indexOf(tab);
          $scope.tabs.splice(index, 1);
        };
      }],
    controllerAs: 'tabsCtrl'    // controllerAs
  };
});
<!--
tabs.html
html template file
for custom directive controller
-->
<ul class="nav nav-tabs justify-content-center">
  <li style="padding:10px; min-width:100px; background:white; border: 1px solid grey" class="nav-item" ng-repeat="tab in tabs" ng-class="{active: isSelected(tab)}">
    <div class="close-button"><a ng-click="removeTab(tab);"><i class="fas fa-times float-right"></i></a></div>
    <a ng-click="selectTab(tab);">{{tab}}</a>
  </li>
</ul>
<!DOCTYPE html>
<!--
index.html
-->
<html ng-app="myApp">
<head>
  <!-- bootsrap CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/js/all.js">
</head>
<body>
  <div>
    <div class="row">
      <!-- calling tabs directive controller functions -->
      <div class="col">
        <form name="tabForm" ng-submit="addTab(data.name); selectTab(data.name); data.name = '';">
          <div class="input-group p-3">
            <input type="text" class="form-control" name="name" ng-model="data.name" placeholder="Add Tab" required>
            <div class="input-group-append">
              <input type="submit" class="btn btn-md btn-info" value="Add">
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <!-- tabs directive controller -->
      <tabs></tabs>
    </div>
  </div>
  <!-- AngularJS CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="app.js"></script>
</body>
</html>