quick note angular 1 autofocus fix
AngularJS
23
Javascript
247
White

Hoàng Duy viết ngày 14/04/2016

Vừa nãy mình làm một cái search component dùng angular 1, gồm một cái toggle khi ấn vào thì overlay search hiện ra. Tất nhiên cái này thì piece of cake mẹ rồi. Tuy nhiên vấn đề là cái search text input phải tự focus vào nó chứ không thể để người dùng phải thêm 1 extra click được. OK, vậy anh thêm cái attribute autofocus vào cái input là xong chứ gì.

Tuy nhiên đếch biết tại sao input chỉ focus vào lần đầu tiên search overlay được render, còn những lần sau không hoạt động nữa. Tôi đoán là do angular cache lại các element này chứ không tạo lại nữa, còn autofocus chỉ hoạt động khi element vừa được khởi tạo.

Thế là đành viết một directive extend cái attribute autofocus. Nguyên nhân là muốn focus phải manipulate DOM, mà component lại không có link function (Angular khuyến cáo không manipulate DOM trong controller, vì nó được gọi lúc DOM chưa render xong)

<!--input element-->
<input type="text" autofocus/>
function autofocusDirective() {
    return {
        restrict: 'A',
        link(scope, elm, attr, ctrl) {
            elm[0].focus()
        }
    }
}

module.directive('autofocus', autofocusDirective)

Tuy nhiên không hoạt động :smile:

Mất mười phút không hiểu chuyện gì xảy ra. Trong một nỗ lực tuyệt vọng, mình thêm cái setTImeout vào để defer việc gọi focus sang next tick, để cho DOM có thêm 1 chút thời gian render

// ...
setTimeout(() => {
    elm[0].focus()
}, 0)

Thế là tự nhiên chạy. Thần kỳ vãi lúa :smile:

Bonus: component lifecycle hook

Có một cách can thiệp vào DOM ngay trong controller là sử dụng component lifecycle hook $postLink(). Hàm này cũng giống hàm link của directive, túc là được gọi lúc directive đã gắn vào cây DOM.

SearchResultController.$inject = [
    '$element' //inject cái service này để tương tác được với DOM
]
function SearchResultController($element) {
    var vm = this;

    vm.$postLink = function() {
        setTimeout(function() {
            $elment.find('input').focus()
        }, 0);
    }
}
Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hoàng Duy

24 bài viết.
62 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
40 8
Xin chào, đây là lần đầu tiên mình post bài ở đây. Nhiều vấn đề mình cũng không rành lắm, có gì sai mọi người góp ý nhé. Xin cảm ơn :D Bài này gi...
Hoàng Duy viết 3 năm trước
40 8
White
30 3
Đây là một trong các concept mới đối tượng mới được đưa vào ECMAScript 6. Việc sử dụng chúng rất dễ nhưng để hiểu được thì (đối với tôi) cũng cần k...
Hoàng Duy viết 3 năm trước
30 3
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
Bài viết liên quan
White
43 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
43 8
White
12 11
Khi các bạn viết sử dụng AngularJS có thấy thắc mắc về phần làm thế nào để mình viết 1 function mà có thể sử dụng cho toàn bộ app của mình không? V...
My Mai viết hơn 3 năm trước
12 11
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
24 bài viết.
62 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!