From adeefff1bb465b492f7d5b197dd1589843360ceb Mon Sep 17 00:00:00 2001
From: Gustavo Martin Morcuende <gu.martinm@gmail.com>
Date: Wed, 9 Sep 2015 00:03:49 +0200
Subject: [PATCH] showcase: controller directive

---
 angularjs/showcase/src/showcase/app/cars/cars.html |  7 +++
 .../widgets/example-controller-as.directive.html   |  2 +
 .../app/widgets/example-controller-as.directive.js | 52 ++++++++++------
 .../app/widgets/example-controller.directive.html  |  6 ++
 .../app/widgets/example-controller.directive.js    | 69 ++++++++++++++++++++++
 angularjs/showcase/src/showcase/index.html         |  1 +
 6 files changed, 120 insertions(+), 17 deletions(-)
 create mode 100644 angularjs/showcase/src/showcase/app/widgets/example-controller.directive.html
 create mode 100644 angularjs/showcase/src/showcase/app/widgets/example-controller.directive.js

diff --git a/angularjs/showcase/src/showcase/app/cars/cars.html b/angularjs/showcase/src/showcase/app/cars/cars.html
index 7960653..812733d 100644
--- a/angularjs/showcase/src/showcase/app/cars/cars.html
+++ b/angularjs/showcase/src/showcase/app/cars/cars.html
@@ -27,7 +27,14 @@
       Get cars
     </button>
   </form>
+
+  <label>controller as directive:</label>
   <controller-as-directive>
 
   </controller-as-directive>
+
+  <label>controller directive:</label>
+  <controller-directive>
+
+  </controller-directive>
 </div>
diff --git a/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.html b/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.html
index abd749a..8b82b15 100644
--- a/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.html
+++ b/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.html
@@ -2,3 +2,5 @@
 <div>hello world</div>
 <div>max={{vm.max}}<input ng-model="vm.max"/></div>
 <div>min={{vm.min}}<input ng-model="vm.min"/></div>
+<div>value assigned in controller={{vm.controller}}</div>
+<div>value assigned in post link={{vm.postlink}}</div>
diff --git a/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.js b/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.js
index fa730ab..ce6cd7f 100644
--- a/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.js
+++ b/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.js
@@ -45,17 +45,32 @@
       }
     };
 
-    function linkFunc(scope, el, attr, ctrl) {
-      console.log('LINK: scope doesn\'t contain the min and max properties:');
-      console.log('LINK: min, because it was assigned to vm/this');
-      console.log('LINK: max, because we are using bindToController and max is a property of our controller ' +
-        '(vm/this) instead of our scope.');
-      console.log('LINK: scope.min = %s *** should be undefined', scope.min);
-      console.log('LINK: scope.max = %s *** should be undefined', scope.max);
-      console.log('LINK: min has the value assigned in our controller');
-      console.log('LINK: max is undefined because we didn\'t assign any value');
-      console.log('LINK: scope.vm.min = %s', scope.vm.min);
-      console.log('LINK: scope.vm.max = %s', scope.vm.max);
+    function linkFunc(scope, el, attr, vm) {
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: scope doesn\'t contain the min, max and controller properties:');
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: min, because it was assigned to vm/this');
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: max, because we are using bindToController and max is a property of ' +
+        'our controller (vm/this) instead of our scope.');
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: controller, because it was assigned to vm/this');
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.min = %s *** should be undefined', scope.min);
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.max = %s *** should be undefined', scope.max);
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.controller = %s *** should be undefined', scope.controller);
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: min has the value assigned in our controller');
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: max is undefined because we didn\'t assign any value');
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: controller has the value assigned in our controller');
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.vm.min = %s', scope.vm.min);
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.vm.max = %s', scope.vm.max);
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.vm.max = %s', scope.vm.controller);
+
+      scope.vm.postlink = 'Value created in postlink';
+
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: because we are using \'controller as\' the fourth parameter is our ' +
+        'controller\'s instance');
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.min has the value assigned in our controller');
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.max is undefined because we didn\'t assign any value');
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.controller has the value assigned in our controller');
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.min = %s', vm.min);
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.max = %s', vm.max);
+      console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.controller = %s', vm.controller);
     }
   }
 
@@ -66,12 +81,15 @@
 
     vm.min = 3;
 
-    console.log('CTRL: $scope object contains vm. It doesn\'t contain max property because we are using ' +
-      'bindToController. What means, max property will be assigned in our controller (vm/this) instead of our scope.');
-    console.log('CTRL: $scope.vm.min = %s', $scope.vm.min);
-    console.log('CTRL: $scope.vm.max = %s', $scope.vm.max);
-    console.log('CTRL: vm.min = %s', vm.min);
-    console.log('CTRL: vm.max = %s', vm.max);
+    console.log('CONTROLLER-AS-DIRECTIVE CTRL: $scope object contains vm. It doesn\'t contain max property because ' +
+      'we are using bindToController. What means, max property will be assigned in our controller (vm/this) instead ' +
+      'of our scope.');
+    console.log('CONTROLLER-AS-DIRECTIVE CTRL: $scope.vm.min = %s', $scope.vm.min);
+    console.log('CONTROLLER-AS-DIRECTIVE CTRL: $scope.vm.max = %s', $scope.vm.max);
+    console.log('CONTROLLER-AS-DIRECTIVE CTRL: vm.min = %s', vm.min);
+    console.log('CONTROLLER-AS-DIRECTIVE CTRL: vm.max = %s', vm.max);
+
+    vm.controller = 'Value created in controller';
   }
 
 })();
diff --git a/angularjs/showcase/src/showcase/app/widgets/example-controller.directive.html b/angularjs/showcase/src/showcase/app/widgets/example-controller.directive.html
new file mode 100644
index 0000000..e07cef8
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/widgets/example-controller.directive.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<div>hello world</div>
+<div>max={{max}}<input ng-model="max"/></div>
+<div>min={{min}}<input ng-model="min"/></div>
+<div>value assigned in controller={{controller}}</div>
+<div>value assigned in post link={{postlink}}</div>
diff --git a/angularjs/showcase/src/showcase/app/widgets/example-controller.directive.js b/angularjs/showcase/src/showcase/app/widgets/example-controller.directive.js
new file mode 100644
index 0000000..ebf8f63
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/widgets/example-controller.directive.js
@@ -0,0 +1,69 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.widgets')
+    .directive('controllerDirective', controllerDirective);
+
+  /**
+   * @ngdoc directive
+   * @name app.widgets.directive:controllerDirective
+   * @restrict EA
+   * @requires $scope
+   *
+   * <p>
+   * <br>
+   * {@link https://docs.angularjs.org/api/ng/type/$rootScope.Scope $scope}
+   * </p>
+   *
+   * @description
+   * Controller directive example.
+   *
+   * @element controller-directive
+   *
+   * @example
+    <example name="controller-directive" module="app.widgets">
+      <file name="index.html">
+        <controller-directive>
+      </file>
+    </example>
+   */
+  function controllerDirective() {
+    return {
+      restrict: 'EA',
+      templateUrl: 'app/widgets/example-controller.directive.html',
+      link: linkFunc,
+      controller: ExampleController,
+      scope: {
+        max: '='
+      }
+    };
+
+    function linkFunc(scope, el, attr, ctrl) {
+      console.log('CONTROLLER-DIRECTIVE LINK: scope contains the min, max and controller properties:');
+      console.log('CONTROLLER-DIRECTIVE LINK: scope.min = %s', scope.min);
+      console.log('CONTROLLER-DIRECTIVE LINK: scope.max = %s *** should be undefined', scope.max);
+      console.log('CONTROLLER-DIRECTIVE LINK: scope.controller = %s', scope.controller);
+
+      scope.postlink = 'Value created in postlink';
+
+      console.log('CONTROLLER-DIRECTIVE LINK: because we are NOT using \'controller as\' the fourth parameter is our ' +
+        'controller\'s instance but it doesn\'t have anything interesting!!!!');
+      console.log('CONTROLLER-DIRECTIVE LINK: ctrl.min = %s *** should be undefined', ctrl.min);
+      console.log('CONTROLLER-DIRECTIVE LINK: ctrl.max = %s *** should be undefined', ctrl.max);
+      console.log('CONTROLLER-DIRECTIVE LINK: ctrl.controller = %s *** should be undefined', ctrl.controller);
+    }
+  }
+
+  /* @ngInject */
+  function ExampleController($scope) {
+
+    $scope.min = 3;
+
+    console.log('CONTROLLER-DIRECTIVE CTRL: $scope.min = %s', $scope.min);
+    console.log('CONTROLLER-DIRECTIVE CTRL: $scope.max = %s', $scope.max);
+
+    $scope.controller = 'Value created in controller';
+  }
+
+})();
diff --git a/angularjs/showcase/src/showcase/index.html b/angularjs/showcase/src/showcase/index.html
index 3a1b96e..03a242d 100644
--- a/angularjs/showcase/src/showcase/index.html
+++ b/angularjs/showcase/src/showcase/index.html
@@ -52,6 +52,7 @@
     <!-- build:js(.) js/app.min.js -->
     <!-- inject:js -->
     <script src="/src/showcase/app/widgets/widgets.module.js"></script>
+    <script src="/src/showcase/app/widgets/example-controller.directive.js"></script>
     <script src="/src/showcase/app/widgets/example-controller-as.directive.js"></script>
     <script src="/src/showcase/app/welcome/welcome.module.js"></script>
     <script src="/src/showcase/app/welcome/welcome.route.js"></script>
-- 
2.1.4