Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit f91a384

Browse files
fix(fabActions): corrected use of postLink
properly attach blur/focus listeners on fab-action-items.
1 parent 76cfd70 commit f91a384

File tree

2 files changed

+65
-43
lines changed

2 files changed

+65
-43
lines changed

src/components/fabActions/fabActions.js

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -33,25 +33,27 @@
3333
if (children.attr('ng-repeat')) {
3434
children.addClass('md-fab-action-item');
3535
} else {
36-
// After setting up the listeners, wrap every child in a new div and add a class that we can
37-
// scale/fling independently
36+
// Wrap every child in a new div and add a class that we can scale/fling independently
3837
children.wrap('<div class="md-fab-action-item">');
3938
}
40-
},
41-
42-
link: function(scope, element, attributes, controllers) {
43-
// Grab whichever parent controller is used
44-
var controller = controllers[0] || controllers[1];
45-
46-
// Make the children open/close their parent directive
47-
if (controller) {
48-
angular.forEach(element.children(), function(child) {
49-
angular.element(child).on('focus', controller.open);
50-
angular.element(child).on('blur', controller.close);
51-
});
39+
40+
return function postLink(scope, element, attributes, controllers) {
41+
// Grab whichever parent controller is used
42+
var controller = controllers[0] || controllers[1];
43+
44+
// Make the children open/close their parent directive
45+
if (controller) {
46+
angular.forEach(element.children(), function(child) {
47+
// Attach listeners to the `md-fab-action-item`
48+
child = angular.element(child).children()[0];
49+
50+
angular.element(child).on('focus', controller.open);
51+
angular.element(child).on('blur', controller.close);
52+
});
53+
}
5254
}
5355
}
5456
}
5557
}
5658

57-
})();
59+
})();

src/components/fabSpeedDial/fabSpeedDial.spec.js

Lines changed: 48 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
1-
describe('<md-fab-speed-dial> directive', function() {
2-
3-
beforeEach(module('material.components.fabSpeedDial'));
1+
describe('<md-fab-speed-dial> directive', function () {
42

53
var pageScope, element, controller;
4+
var $rootScope, $animate, $timeout;
65

7-
function compileAndLink(template) {
8-
inject(function($compile, $rootScope) {
9-
pageScope = $rootScope.$new();
10-
element = $compile(template)(pageScope);
11-
controller = element.controller('mdFabSpeedDial');
12-
13-
pageScope.$apply();
14-
});
15-
}
6+
beforeEach(module('material.components.fabSpeedDial'));
7+
beforeEach(inject(function (_$rootScope_, _$animate_, _$timeout_) {
8+
$rootScope = _$rootScope_;
9+
$animate = _$animate_;
10+
$timeout = _$timeout_;
11+
}));
1612

17-
it('applies a class for each direction', inject(function() {
18-
compileAndLink(
13+
it('applies a class for each direction', inject(function () {
14+
build(
1915
'<md-fab-speed-dial md-direction="{{direction}}"></md-fab-speed-dial>'
2016
);
2117

@@ -32,8 +28,8 @@ describe('<md-fab-speed-dial> directive', function() {
3228
expect(element.hasClass('md-right')).toBe(true);
3329
}));
3430

35-
it('opens when the trigger element is focused', inject(function() {
36-
compileAndLink(
31+
it('opens when the trigger element is focused', inject(function () {
32+
build(
3733
'<md-fab-speed-dial><md-fab-trigger><button></button></md-fab-trigger></md-fab-speed-dial>'
3834
);
3935

@@ -42,32 +38,46 @@ describe('<md-fab-speed-dial> directive', function() {
4238
expect(controller.isOpen).toBe(true);
4339
}));
4440

45-
it('opens when the speed dial elements are focused', inject(function() {
46-
compileAndLink(
41+
it('opens when the speed dial elements are focused', inject(function () {
42+
build(
4743
'<md-fab-speed-dial><md-fab-actions><button></button></md-fab-actions></md-fab-speed-dial>'
4844
);
4945

5046
element.find('button').triggerHandler('focus');
5147
pageScope.$digest();
48+
5249
expect(controller.isOpen).toBe(true);
5350
}));
5451

55-
it('closes when the speed dial elements are blurred', inject(function() {
56-
compileAndLink(
57-
'<md-fab-speed-dial><md-fab-actions><button></button></md-fab-actions></md-fab-speed-dial>'
52+
it('closes when the speed dial elements are blurred', inject(function () {
53+
build(
54+
'<md-fab-speed-dial>'+
55+
' <md-fab-trigger>' +
56+
' <button>Show Actions</button>' +
57+
' </md-fab-trigger>' +
58+
' </md-fab-actions>' +
59+
' <md-fab-actions>' +
60+
' <button>Action 1</button>' +
61+
' </md-fab-actions>' +
62+
'</md-fab-speed-dial>'
5863
);
5964

6065
element.find('button').triggerHandler('focus');
6166
pageScope.$digest();
67+
6268
expect(controller.isOpen).toBe(true);
6369

64-
element.find('button').triggerHandler('blur');
70+
var actionBtn = element.find('md-fab-actions').find('button');
71+
actionBtn.triggerHandler('focus');
72+
pageScope.$digest();
73+
actionBtn.triggerHandler('blur');
6574
pageScope.$digest();
75+
6676
expect(controller.isOpen).toBe(false);
6777
}));
6878

69-
it('allows programmatic opening through the md-open attribute', inject(function() {
70-
compileAndLink(
79+
it('allows programmatic opening through the md-open attribute', inject(function () {
80+
build(
7181
'<md-fab-speed-dial md-open="isOpen"></md-fab-speed-dial>'
7282
);
7383

@@ -83,8 +93,8 @@ describe('<md-fab-speed-dial> directive', function() {
8393
expect(controller.isOpen).toBe(false);
8494
}));
8595

86-
it('properly finishes the fling animation', inject(function(mdFabSpeedDialFlingAnimation) {
87-
compileAndLink(
96+
it('properly finishes the fling animation', inject(function (mdFabSpeedDialFlingAnimation) {
97+
build(
8898
'<md-fab-speed-dial md-open="isOpen" class="md-fling">' +
8999
' <md-fab-trigger><button></button></md-fab-trigger>' +
90100
' <md-fab-actions><button></button></md-fab-actions>' +
@@ -101,8 +111,8 @@ describe('<md-fab-speed-dial> directive', function() {
101111
expect(removeDone).toHaveBeenCalled();
102112
}));
103113

104-
it('properly finishes the scale animation', inject(function(mdFabSpeedDialScaleAnimation) {
105-
compileAndLink(
114+
it('properly finishes the scale animation', inject(function (mdFabSpeedDialScaleAnimation) {
115+
build(
106116
'<md-fab-speed-dial md-open="isOpen" class="md-fling">' +
107117
' <md-fab-trigger><button></button></md-fab-trigger>' +
108118
' <md-fab-actions><button></button></md-fab-actions>' +
@@ -119,4 +129,14 @@ describe('<md-fab-speed-dial> directive', function() {
119129
expect(removeDone).toHaveBeenCalled();
120130
}));
121131

132+
function build(template) {
133+
inject(function ($compile) {
134+
pageScope = $rootScope.$new();
135+
element = $compile(template)(pageScope);
136+
controller = element.controller('mdFabSpeedDial');
137+
138+
pageScope.$apply();
139+
});
140+
}
141+
122142
});

0 commit comments

Comments
 (0)