Given the following directive

directive('myDirective', function() {
    return {
        restrict: 'A',
        scope: {},
        replace: false,
        template: '<input ng-focus="onFocus()" type="text" />',
        link: function(scope, element, attr) {
            scope.onFocus = function() {
                console.log('got focus');
            };
        }
    };
});

I've tested that the focus watcher works in a browser, but I'd like to be able to trigger it in a unit test. This is what I've tried but it isn't working.

var element = angular.element('<div my-directive></div>');
$pile(element)($scope);
$scope.$digest();
element.find('input')[0].focus();

I can see that I am correctly getting to the input box with the find call, and I would expect that code to trigger the focus event on the input box, but nothing is happening. What am I missing here?

Given the following directive

directive('myDirective', function() {
    return {
        restrict: 'A',
        scope: {},
        replace: false,
        template: '<input ng-focus="onFocus()" type="text" />',
        link: function(scope, element, attr) {
            scope.onFocus = function() {
                console.log('got focus');
            };
        }
    };
});

I've tested that the focus watcher works in a browser, but I'd like to be able to trigger it in a unit test. This is what I've tried but it isn't working.

var element = angular.element('<div my-directive></div>');
$pile(element)($scope);
$scope.$digest();
element.find('input')[0].focus();

I can see that I am correctly getting to the input box with the find call, and I would expect that code to trigger the focus event on the input box, but nothing is happening. What am I missing here?

• javascript
• jquery
• angularjs
• jasmine
• jasmine-jquery

• I don't think you need to do element.find('input') the element is the input tag – dcodesmith Commented Jan 28, 2014 at 16:20
• Replace is set to false. element is the div and contained within it is the input tag. – grivescorbett Commented Jan 28, 2014 at 16:21
• Oh, I missed that part – dcodesmith Commented Jan 28, 2014 at 16:22
• 1 Try element.find('input').triggerHandler('focus'); – dcodesmith Commented Jan 28, 2014 at 16:22
• No such luck with $(element.find('input')[0]).triggerHandler('focus'); – grivescorbett Commented Jan 28, 2014 at 16:24

1 Answer 1

When trying to trigger events on angular elements, one should use the triggerHandler() function which is just really jqLite function and not angulars and then pass in the event as a string parameter as shown below.

element.find('input').triggerHandler('focus');

To perform any other functions on an angular element, read the documentation here, it shows you a list of functions available to angular elements