/**
 * Created by Daniel on 13/08/15.
 *
 * For DOM manipulation, use directives. View is the "official record".
 */
(function() {
  'use strict';
  var app = angular.module('app.directives', []);

  app.directive("productDescription", function() {
    return {
      restrict: 'E',
      templateUrl: "product-description.html"
    };
  });

  /**
   * Usage:
   * <button confirm-click="sessionCtrl.deleteSession(session.id)" confirmation="Are you sure?">Delete</button>
   */
  app.directive('confirmClick', function() {
    return {
      restrict: 'A',
      link: function(scope, elt, attrs) {
        elt.bind('click', function(e) {
          var message = attrs.confirmation || 'Are you sure you want to do this?';
          if (window.confirm(message)) {
            var action = attrs.confirmClick;
            if (action)
              scope.$apply(scope.$eval(action));
          }
        });
      }
    };
  });

  /**
   * ^: Locate the required controller by searching the element and its parents. Throw an error if not found.
   * https://code.angularjs.org/1.3.0/docs/api/ng/service/$compile#-require-
   */
  app.directive('pagination', function () {
    return {
      restrict: 'E',
      templateUrl: 'pagination.html',
      require: '^searchCtrl'
    };
  });

  function getDirectiveDir(rootDir) {
    return rootDir+'path/to/snippets/';
  }

  /**
   * rootDir is the app's constant
   */
  app.directive('searchResult', ['rootDir', function(rootDir) {
    return {
      restrict: 'E',
      templateUrl: getDirectiveDir(rootDir)+'search_result.html',
      require: '^Controller',
      controllerAs: 'ctrl'
    };
  }]);


})();
@@ -73,17 +73,18 @@
 rectives
-.
+ -
  View is
@@ -107,16 +107,69 @@
 ecord%22.%0A
+ * Directive is the extension of HTML (part of HTML)%0A
  */%0A(fun
@@ -605,16 +605,245 @@
 t: 'A',%0A
+      /**%0A       * link declares the controllers specifically for this directieve%0A       * @param scope, controller's scope%0A       * @param elt, the entire the HTML tag%0A       * @param attrs, the attributes of the HTML%0A       */%0A
       li
@@ -1084,16 +1084,58 @@
 rmClick;
+  // binding the 'confirm-click' attribute
 %0A       
@@ -1150,16 +1150,18 @@
 (action)
+ %7B
 %0A       
@@ -1202,16 +1202,30 @@
 tion));%0A
+            %7D%0A
         
@@ -1987,13 +1987,408 @@
  %7D%5D);%0A%0A%0A
+  /**%0A   * A controller dedicated to a directive%0A   */%0A  app.directive( 'toggle', function () %7B%0A    return %7B%0A      scope: true,%0A      template: '%3Ca class=%22btn%22 ng%E2%80%90class=%22%7Bactive: on%7D%22 ng%E2%80%90click=%22toggle()%22%3EToggle me! %3C/a%3E',%0A      link: function ( scope, elt, attrs ) %7B%0A        scope.on = false;%0A        scope.toggle = function () %7B%0A          scope.on = !scope.on;%0A        %7D;%0A      %7D%0A    %7D;%0A  %7D);%0A%0A
 %7D)();

add directives