Question

我有一个角度指令，我正在放入div元素。在我的一个链接：函数中，我调用了element.focus()。我收到了一个控制台错误：Object [object Object] has no method focus。

我调用alert（之前的行元素，它表示元素为[[object HTMLDivElement]]。

在调用焦点之前，我是否需要以某种方式将元素转换为div？

这是一个指令，

tsUui.directive('userList', function(){
    return{
        restrict: 'A',
                link: function (scope, elem, attrs){
                    scope.something=function() {
                       elem.focus();
                    };
                }
        });

这是项目大部分内容的一部分：http://plnkr.co/edit/SiBDuylEv1LUCuWCv5Ep?p=preview

重现错误：单击其中一个用户行，您将收到警报（elem）。如果您观看控制台，您将看到焦点错误。

Answer 1

如果在AngularJS之前加载jQuery，Angular使用jQuery而不是jqLite（包含在AngularJS中）。然后你可以使用elem.focus(); 否则，正如史蒂夫所提到的，你必须使用$(elem).focus();

Answer 2

在渲染元素之前调用链接函数，因此focus（）通常不会起作用。这是一个示例，其中＆＃34;链接＆＃34;指令的属性被分成＆＃34; pre＆＃34;和＆＃34;发布＆＃34;，用于预链接和后链接功能。

Working Example: http://plnkr.co/edit/Fj59GB

// this is the directive you add to any element you want to highlight after creation
Guest.directive('autoFocus', function() {
    return {
        link: {
            pre: function preLink(scope, element, attr) {
                console.debug('prelink called');
                // this fails since the element hasn't rendered
                //element[0].focus();
            },
            post: function postLink(scope, element, attr) {
                console.debug('postlink called');
                // this succeeds since the element has been rendered
                element[0].focus();
            }
        }
    }
});

<input value="hello" />
<!-- this input automatically gets focus on creation -->
<input value="world" auto-focus />

Full AngularJS Directive Docs: https://docs.angularjs.org/api/ng/service/$compile

div上的Angular指令，element没有焦点方法

2 个答案: