fix(fabActions): corrected use of postLink

properly attach blur/focus listeners on fab-action-items.

Author: ThomasBurleson

src/components/fabActions/fabActions.js

@@ -33,25 +33,27 @@
         if (children.attr('ng-repeat')) {
           children.addClass('md-fab-action-item');
         } else {
-          // After setting up the listeners, wrap every child in a new div and add a class that we can
-          // scale/fling independently
+          // Wrap every child in a new div and add a class that we can scale/fling independently
           children.wrap('<div class="md-fab-action-item">');
         }
-      },
-
-      link: function(scope, element, attributes, controllers) {
-        // Grab whichever parent controller is used
-        var controller = controllers[0] || controllers[1];
-
-        // Make the children open/close their parent directive
-        if (controller) {
-          angular.forEach(element.children(), function(child) {
-            angular.element(child).on('focus', controller.open);
-            angular.element(child).on('blur', controller.close);
-          });
+
+        return function postLink(scope, element, attributes, controllers) {
+          // Grab whichever parent controller is used
+          var controller = controllers[0] || controllers[1];
+
+          // Make the children open/close their parent directive
+          if (controller) {
+            angular.forEach(element.children(), function(child) {
+              // Attach listeners to the `md-fab-action-item`
+              child = angular.element(child).children()[0];
+
+              angular.element(child).on('focus', controller.open);
+              angular.element(child).on('blur', controller.close);
+            });
+          }
         }
       }
     }
   }
 
-})();
+})();

src/components/fabSpeedDial/fabSpeedDial.spec.js

@@ -1,21 +1,17 @@
-describe('<md-fab-speed-dial> directive', function() {
-
-  beforeEach(module('material.components.fabSpeedDial'));
+describe('<md-fab-speed-dial> directive', function () {
 
   var pageScope, element, controller;
+  var $rootScope, $animate, $timeout;
 
-  function compileAndLink(template) {
-    inject(function($compile, $rootScope) {
-      pageScope = $rootScope.$new();
-      element = $compile(template)(pageScope);
-      controller = element.controller('mdFabSpeedDial');
-
-      pageScope.$apply();
-    });
-  }
+  beforeEach(module('material.components.fabSpeedDial'));
+  beforeEach(inject(function (_$rootScope_, _$animate_, _$timeout_) {
+    $rootScope = _$rootScope_;
+    $animate = _$animate_;
+    $timeout = _$timeout_;
+  }));
 
-  it('applies a class for each direction', inject(function() {
-    compileAndLink(
+  it('applies a class for each direction', inject(function () {
+    build(
       '<md-fab-speed-dial md-direction="{{direction}}"></md-fab-speed-dial>'
     );
 
@@ -32,8 +28,8 @@ describe('<md-fab-speed-dial> directive', function() {
     expect(element.hasClass('md-right')).toBe(true);
   }));
 
-  it('opens when the trigger element is focused', inject(function() {
-    compileAndLink(
+  it('opens when the trigger element is focused', inject(function () {
+    build(
       '<md-fab-speed-dial><md-fab-trigger><button></button></md-fab-trigger></md-fab-speed-dial>'
     );
 
@@ -42,32 +38,46 @@ describe('<md-fab-speed-dial> directive', function() {
     expect(controller.isOpen).toBe(true);
   }));
 
-  it('opens when the speed dial elements are focused', inject(function() {
-    compileAndLink(
+  it('opens when the speed dial elements are focused', inject(function () {
+    build(
       '<md-fab-speed-dial><md-fab-actions><button></button></md-fab-actions></md-fab-speed-dial>'
     );
 
     element.find('button').triggerHandler('focus');
     pageScope.$digest();
+
     expect(controller.isOpen).toBe(true);
   }));
 
-  it('closes when the speed dial elements are blurred', inject(function() {
-    compileAndLink(
-      '<md-fab-speed-dial><md-fab-actions><button></button></md-fab-actions></md-fab-speed-dial>'
+  it('closes when the speed dial elements are blurred', inject(function () {
+    build(
+      '<md-fab-speed-dial>'+
+      ' <md-fab-trigger>' +
+      '   <button>Show Actions</button>' +
+      ' </md-fab-trigger>' +
+      ' </md-fab-actions>' +
+      ' <md-fab-actions>' +
+      '   <button>Action 1</button>' +
+      ' </md-fab-actions>' +
+      '</md-fab-speed-dial>'
     );
 
     element.find('button').triggerHandler('focus');
     pageScope.$digest();
+
     expect(controller.isOpen).toBe(true);
 
-    element.find('button').triggerHandler('blur');
+    var actionBtn = element.find('md-fab-actions').find('button');
+    actionBtn.triggerHandler('focus');
+    pageScope.$digest();
+    actionBtn.triggerHandler('blur');
     pageScope.$digest();
+
     expect(controller.isOpen).toBe(false);
   }));
 
-  it('allows programmatic opening through the md-open attribute', inject(function() {
-    compileAndLink(
+  it('allows programmatic opening through the md-open attribute', inject(function () {
+    build(
       '<md-fab-speed-dial md-open="isOpen"></md-fab-speed-dial>'
     );
 
@@ -83,8 +93,8 @@ describe('<md-fab-speed-dial> directive', function() {
     expect(controller.isOpen).toBe(false);
   }));
 
-  it('properly finishes the fling animation', inject(function(mdFabSpeedDialFlingAnimation) {
-    compileAndLink(
+  it('properly finishes the fling animation', inject(function (mdFabSpeedDialFlingAnimation) {
+    build(
       '<md-fab-speed-dial md-open="isOpen" class="md-fling">' +
       '  <md-fab-trigger><button></button></md-fab-trigger>' +
       '  <md-fab-actions><button></button></md-fab-actions>' +
@@ -101,8 +111,8 @@ describe('<md-fab-speed-dial> directive', function() {
     expect(removeDone).toHaveBeenCalled();
   }));
 
-  it('properly finishes the scale animation', inject(function(mdFabSpeedDialScaleAnimation) {
-    compileAndLink(
+  it('properly finishes the scale animation', inject(function (mdFabSpeedDialScaleAnimation) {
+    build(
       '<md-fab-speed-dial md-open="isOpen" class="md-fling">' +
       '  <md-fab-trigger><button></button></md-fab-trigger>' +
       '  <md-fab-actions><button></button></md-fab-actions>' +
@@ -119,4 +129,14 @@ describe('<md-fab-speed-dial> directive', function() {
     expect(removeDone).toHaveBeenCalled();
   }));
 
+  function build(template) {
+    inject(function ($compile) {
+      pageScope = $rootScope.$new();
+      element = $compile(template)(pageScope);
+      controller = element.controller('mdFabSpeedDial');
+
+      pageScope.$apply();
+    });
+  }
+
 });