quick note angular 1 autofocus fix
AngularJS
23
Javascript
200
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.
54 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
39 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 gần 3 năm trước
39 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 hơn 2 năm trước
30 3
White
21 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 hơn 2 năm trước
21 8
Bài viết liên quan
White
11 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 gần 3 năm trước
11 11
White
7 2
1. Giới thiệu: Lovefield, một relational database được viết hoàn toàn bởi JavaScript & được phát triển bởi Google. Cung cấp cú pháp truy vấn tư...
Cùi Bắp viết gần 2 năm trước
7 2
White
19 4
Tạo ứng dụng chat với 50 dòng code, Firebase và AngularJS Từ lúc viết blog tới giờ, mình chưa có bài nào hướng dẫn các bạn tạo ra một sản phẩm từ ...
Huy Hoàng Phạm viết hơn 2 năm trước
19 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
24 bài viết.
54 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á!