Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Commit 21bcd5e

Browse files
Den-dpuser378230
authored andcommitted
feat(events): add open-close callback
Adds a new `uisOpenClose` directive which allows a callback to be defined that is called whenever the dropdown is opened or closed. Callback is passed an isOpen parameter which is set to true if the dropdown has been opened, otherwise false. Closes #432, closes #1153
1 parent 3dfde71 commit 21bcd5e

File tree

2 files changed

+45
-0
lines changed

2 files changed

+45
-0
lines changed

src/uisOpenCloseDirective.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
uis.directive('uisOpenClose', ['$parse', '$timeout', function ($parse, $timeout) {
2+
return {
3+
restrict: 'A',
4+
require: 'uiSelect',
5+
link: function (scope, element, attrs, $select) {
6+
$select.onOpenCloseCallback = $parse(attrs.uisOpenClose);
7+
8+
scope.$watch('$select.open', function (isOpen, previousState) {
9+
if (isOpen !== previousState) {
10+
$timeout(function () {
11+
$select.onOpenCloseCallback(scope, {
12+
isOpen: isOpen
13+
});
14+
});
15+
}
16+
});
17+
}
18+
};
19+
}]);

test/select.spec.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1375,6 +1375,32 @@ describe('ui-select tests', function() {
13751375
expect(scope.$model).toBe(scope.$item);
13761376
});
13771377

1378+
it('should call open-close callback with isOpen state as first argument on open and on close', function () {
1379+
1380+
var el = compileTemplate(
1381+
'<ui-select uis-open-close="onOpenCloseFn(isOpen)" ng-model="selection.selected"> \
1382+
<ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
1383+
<ui-select-choices repeat="person.name as person in people | filter: $select.search"> \
1384+
<div ng-bind-html="person.name | highlight: $select.search"></div> \
1385+
<div ng-bind-html="person.email | highlight: $select.search"></div> \
1386+
</ui-select-choices> \
1387+
</ui-select>'
1388+
);
1389+
1390+
scope.onOpenCloseFn = function(){};
1391+
spyOn(scope, 'onOpenCloseFn');
1392+
1393+
openDropdown(el);
1394+
$timeout.flush();
1395+
expect(scope.onOpenCloseFn).toHaveBeenCalledWith(true);
1396+
1397+
closeDropdown(el);
1398+
$timeout.flush();
1399+
expect(scope.onOpenCloseFn).toHaveBeenCalledWith(false);
1400+
1401+
expect(scope.onOpenCloseFn.calls.count()).toBe(2);
1402+
});
1403+
13781404
it('should allow creating tag in single select mode with tagging enabled', function() {
13791405

13801406
scope.taggingFunc = function (name) {

0 commit comments

Comments
 (0)