Skip to content

Commit de6a13b

Browse files
Den-dpBogaerts Kristof
authored and
Bogaerts Kristof
committed
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 angular-ui#432, closes angular-ui#1153
1 parent 2685a54 commit de6a13b

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)