在AngularJS指令模板中测试对元素调用focus()方法

Question

考虑以下指令：

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');
            };
        }
    };
});

我测试过在浏览器中聚焦监视器的工作，但我希望能够在单元测试中触发它。这是我尝试过的内容，但它没有起作用。

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

我可以看到用find函数成功找到了输入框，预期代码会触发输入框的focus事件，但是却没有任何反应。我错过了什么吗？

- grivescorbett

---

哦，我错过了那部分。 - dcodesmith

尝试使用 element.find('input').triggerHandler('focus')； - dcodesmith

没有这样的运气可以使用 $(element.find('input')[0]).triggerHandler('focus');。 - grivescorbett

抱歉，我没有看到你说的话。我确实这样做了，而且它起作用了。关于填充文本，有什么想法吗？ - grivescorbett

element.find('input').val('hello world')。请在您方便的时候接受我的答案。 - dcodesmith

Answer 1

在尝试触发Angular元素上的事件时，应使用triggerHandler() 函数，它只是jqLite函数而不是Angular的函数，并将事件作为字符串参数传递，如下所示。

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

要在angular元素上执行任何其他功能，请阅读此处的文档，它展示了可供angular元素使用的功能列表

- dcodesmith