feature(asDirective): create as directive

Author: drpicox

angularFiles.js

@@ -53,6 +53,7 @@ var angularFiles = {
 
     'src/ng/directive/directives.js',
     'src/ng/directive/a.js',
+    'src/ng/directive/as.js',
     'src/ng/directive/attrs.js',
     'src/ng/directive/form.js',
     'src/ng/directive/input.js',

src/AngularPublic.js

@@ -6,6 +6,7 @@
   $CompileProvider,
 
   htmlAnchorDirective,
+  componentAsDirective,
   inputDirective,
   inputDirective,
   formDirective,
@@ -166,6 +167,7 @@ function publishExternalAPI(angular) {
       $provide.provider('$compile', $CompileProvider).
         directive({
             a: htmlAnchorDirective,
+            as: componentAsDirective,
             input: inputDirective,
             textarea: inputDirective,
             form: formDirective,

src/ng/directive/as.js

@@ -0,0 +1,90 @@
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name as
+ * @restrict A
+ *
+ * @description
+ * Publishes a component controller or a DOM element into the current scope.
+ *
+ * @element ANY
+ * @param {expression} as {@link guide/expression Expression} to assign the controller.
+ *
+ * This directive allows to access to the controller of components in your
+ * current template or from current controller.
+ *
+ * @example
+ * ### Access to component controller
+ * This example demonstrates basic publishing of the component controller into the scope.
+ * <example name="asDirectiveComponentExample" module="asComponentExample">
+ *   <file name="index.html">
+ *     <script>
+ *       angular.module('asComponentExample', [])
+ *        .component('toggle', {
+ *           controller: function() {
+ *             var opened = false;
+ *             this.isOpen = function() { return opened; };
+ *             this.toggle = function() { opened = !opened; };
+ *           }
+ *         });
+ *     </script>
+ *     <toggle as="myToggle"></toggle>
+ *     <button ng-click="myToggle.toggle()">Toggle</button>
+ *     <div ng-show="myToggle.isOpen()">You are using a children component to show it.</div>
+ *   </file>
+ *   <file name="protractor.js" type="protractor">
+ *      it('should publish the toggle into the scope', function() {
+ *        var toggle = element(by.buttonText('Toggle'));
+ *        expect(toggle.evaluate('myToggle.isOpen()')).toEqual(false);
+ *        toggle.click();
+ *        expect(toggle.evaluate('myToggle.isOpen()')).toEqual(true);
+ *      });
+ *   </file>
+ * </example>
+ *
+ * This directive also allows to bind elements to the scope.
+ *
+ * ```js
+ *   var myMod = angular.module(...);
+ *   myMod.component('myPlayer', {
+ *     template: '' +
+ *       '<audio as="$ctrl.audio" src="foo.ogg"></audio>' +
+ *       '<button ng-click="$ctrl.play()">Play</button>' +
+ *       '',
+ *     controller: function() {
+ *       this.play = function() {
+ *         this.audio.play();
+ *       };
+ *     }
+ *   });
+ * ```
+ *
+ * Note that angular does not allows to access DOM elements directly
+ * from templates, you need a controller to manipulate them.
+ *
+ */
+var componentAsDirective = ['$parse', function($parse) {
+  return {
+    restrict: 'A',
+    compile: function(tElement, tAttrs) {
+      // gets the theoretical controller name, converts <some-thing> into "someThing")
+      var controllerName = tElement[0].tagName.toLowerCase()
+        .replace(/[^\w]\w/g, function(a) { return a.slice(1).toUpperCase(); });
+
+      // get the setter for the as attribute
+      var setter = $parse(tAttrs.as).assign;
+
+      return function(scope, iElement, iAttrs) {
+        // gets the controller of the current element (see jqLiteController for details)
+        var controller = iElement.data('$' + controllerName + 'Controller');
+
+        if (controller) {
+          setter(scope, controller);
+        } else {
+          setter(scope, iElement[0]);
+        }
+      };
+    }
+  };
+}];

test/ng/directive/asSpec.js

@@ -0,0 +1,87 @@
+'use strict';
+
+describe('a', function() {
+
+  it('should bind in the current scope the controller of a component', function() {
+    var expected = {some: 'value'};
+
+    angular.module('my', []).component('myComponent', {
+      template: 'foo',
+      controller: function() {
+        this.property = expected;
+      }
+    });
+    module('my');
+
+    inject(function($compile, $rootScope) {
+      var scope = $rootScope.$new();
+      var $ctrl = {undamaged: true};
+      scope.$ctrl = $ctrl;
+      dealoc($compile('<my-component as="$ctrl.myComponent"></my-component>')(scope));
+
+      expect(scope.$ctrl).toBe($ctrl);
+      expect(scope.$ctrl.undamaged).toBe(true);
+      expect($ctrl.myComponent).not.toBeUndefined();
+      expect($ctrl.myComponent && $ctrl.myComponent.property).toBe(expected);
+      scope.$destroy();
+    });
+  });
+
+  it('should be parametrized with any variable', function() {
+    var myComponentController;
+
+    angular.module('my', []).component('myComponent', {
+      template: 'foo',
+      controller: function() {
+        myComponentController = this;
+      }
+    });
+    module('my');
+
+    inject(function($compile, $rootScope) {
+      var scope = $rootScope.$new();
+      dealoc($compile('<my-component as="bar.myComponent"></my-component>')(scope));
+
+      expect(scope.bar).not.toBeUndefined();
+      expect(scope.bar && scope.bar.myComponent).toBe(myComponentController);
+      scope.$destroy();
+    });
+  });
+
+  it('should be compatible with entity directives with controller', function() {
+    var myDirectiveController;
+
+    angular.module('my', []).directive('myDirective', function() {
+      return {
+        restrict: 'E',
+        controller: function() {
+          myDirectiveController = this;
+        }
+      };
+    });
+    module('my');
+
+    inject(function($compile, $rootScope) {
+      var scope = $rootScope.$new();
+      dealoc($compile('<my-directive as="bar.myDirective"></my-directive>')(scope));
+
+      expect(scope.bar).not.toBeUndefined();
+      expect(scope.bar && scope.bar.myDirective).toBe(myDirectiveController);
+      scope.$destroy();
+    });
+  });
+
+  it('should bind non HTMLElements elements into the current scope if no component', inject(function($compile, $rootScope) {
+    var scope = $rootScope.$new();
+    var $ctrl = {};
+    scope.$ctrl = $ctrl;
+    var element = $compile('<div as="$ctrl.myDiv">SUCCESS</div>')(scope);
+
+    expect(scope.$ctrl).toBe($ctrl);
+    expect($ctrl.myDiv).not.toBeUndefined();
+    expect($ctrl.myDiv && $ctrl.myDiv.innerText).toBe('SUCCESS');
+    dealoc(element);
+    scope.$destroy();
+  }));
+
+});