[Angular] $compile throw jQlite error
AngularJS
23
Javascript
199
White

Hoàng Duy viết ngày 21/10/2016

Tôi vừa phải dùng service $compile của angular để dịch một đoạn text thành html (He, tôi đang định viết 1 tut về $compile :smile:) Nôm na là angular $compile sẽ nhận vào một chuỗi hoặc một phần tử html để chuyển nó thành một hàm biên dịch. Bản thân hàm biên dịch này lại nhận vào một đối tượng $scope để rồi trả về đối tượng HTML. À có code ví dụ đây, ví dụ thôi nhé, chứ chẳng ai làm thế này đâu nhé :smile:

var elmScope = scope.scope || $rootScope.$new();
elmScope.test = 'Hello';
elm.empty();
var child;
try {
    var templateFn = $compile(htmlString);
    child = templateFn(elmScope);
    elm.append(child);
} catch (e) {
    alert(e);
    console.error(e.stack);
}

plunker http://plnkr.co/edit/14l7zncAklYObOw36exO?p=preview

Với đoạn code kia thì khi bạn nhập một đoạn html đàng hoàng với các thẻ đóng mở, mọi việc rất êm thấm, tuy nhiên nếu thử nhập một đoạn text gì đó, như "abc" chẳng hạn, lỗi xảy ra:

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element
http://errors.angularjs.org/1.4.1/jqLite/nosel
    at https://code.angularjs.org/1.4.1/angular.js:68:12
    at JQLite (https://code.angularjs.org/1.4.1/angular.js:2747:13)
    ...

Sao lạ thế nhỉ, tôi đâu có lookup cái gì đâu, ngẫm nghĩ một lúc vẫn không hiểu, đành mở code angular ra xem thì hóa ra thế này.

// file compile.js
function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective, previousCompileContext) {
      if (!($compileNodes instanceof jqLite)) {
        // jquery always rewraps, whereas we need to preserve the original selector so that we can
        // modify it.
        $compileNodes = jqLite($compileNodes);
      }
    ...
  }
//file jqlite.js

function JQLite(element) {
  ...
  if (isString(element)) {
    element = trim(element);
    argIsString = true;
  }
  if (!(this instanceof JQLite)) {
    if (argIsString && element.charAt(0) != '<') {
      throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
    }
    return new JQLite(element);
  }
...

Hiu hiu, hóa ra là cái chuỗi mình nhập vào nó phải bắt đầu bằng '<' thì nó mới biết là tạo mới element chứ không phải đi lookup. Đừng chửi tôi, tôi chẳng dùng jQuery bao giờ nên không biết TT__TT

Cuối cùng để an toàn đành wrap đoạn string trong một element khác.

var wrapper = angular.element('<div>');
wrapper.html(scope.ngAppend);
console.log(wrapper, wrapper.contents());
var templateFn = $compile(wrapper.contents());
child = templateFn(elmScope);

Xem Plunker chạy được ở đây: http://plnkr.co/edit/hJRShbNqU2Sp5iD5GNYT?p=preview

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 hơn 2 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á!