Ngăn chặn ký hiệu dấu ngoặc kép hiển thị trong giây lát trước khi biên dịch / nội suy angular.js

298

Nó dường như chủ yếu là một vấn đề trong IE khi có một số hình ảnh / tập lệnh được tải, có thể có một khoảng thời gian tốt khi chữ {{stringExpression}}trong đánh dấu được hiển thị, sau đó biến mất khi góc được thực hiện với quá trình biên dịch / nội suy của nó tài liệu.

Có một lý do phổ biến tại sao điều này sẽ xảy ra, điều đó cho thấy tôi đang làm gì đó nói chung là sai, hoặc có cách nào để ngăn chặn điều này không?

angularjs

— Jeremy Weir
nguồn

6

Điều này có thể giúp: Branchandbound.net/blog/web/2013/08/some-angularjs-pit thác

— Ismael

Trên đây là giải pháp phù hợp

— Edmund Rojas

283

Tôi nghĩ rằng bạn đang tìm kiếm ngCloakchỉ thị: https://docs.angularjs.org/api/ng/directive/ngCloak

Từ tài liệu:

Lệnh ngCloak được sử dụng để ngăn mẫu html Angular hiển thị ngắn gọn bởi trình duyệt ở dạng thô (chưa biên dịch) trong khi ứng dụng của bạn đang tải. Sử dụng chỉ thị này để tránh hiệu ứng nhấp nháy không mong muốn gây ra bởi màn hình mẫu html.

Lệnh này có thể được áp dụng cho thành <body>phần, nhưng cách sử dụng được ưu tiên là áp dụng nhiều lệnh ngCloak cho các phần nhỏ của trang để cho phép hiển thị liên tục của chế độ xem trình duyệt

— pkozlowski.opensource
nguồn

1

Để tránh mã HTML Angular thô, có ngCloakphổ biến / thực hành tốt nhất không? Có vẻ như không có trí tuệ, nhưng tôi không có kinh nghiệm trong AngularJS.

— Kevin Meredith

32

Tôi không nghĩ rằng nó sẽ hoạt động nếu bạn tải tất cả các tập lệnh ở cuối cơ thể.

— trusktr

8

Aaah, đợi đã, nvm, câu trả lời của LOAS là giải pháp nếu bạn tải tập lệnh lần cuối. Sử dụng lớp .ng-cloak.

— trusktr

3

Tải tập lệnh angularjs tại <head>phần html của bạn ngCloakđể có hiệu quả.

— Mustafa

1

Tôi có thể xác nhận nó hoạt động hoàn hảo nếu tôi tải angular.jstrong <head>phần của trang.

— Aron Lorincz 19/07/2015

197

Ngoài ra, bạn có thể sử dụng thay vì {{hello}}.

http://jsfiddle.net/4LhN9 432 /

— Andrew Joslin
nguồn

94

Một tính năng về ng-bind đôi khi bị bỏ qua là bạn có thể chỉ định văn bản sẽ hiển thị trong khi Angular đang tải: đang tải ... . "Đang tải ..." sẽ xuất hiện, sau đó được thay thế sau khi myScopeProperty được xác định.

— Mark Rajcok

@MarkRajcok: cảm ơn vì tiền boa! Tôi không ý kiến. Điều đó rất đơn giản và thanh lịch và giải quyết một vấn đề mà bản thân tôi đã gặp phải.

— Jim Raden

9

Nếu bạn cần nhiều biểu thức, hãy sử dụng ngBindTemplate. Ví dụ: đang tải ...

— Đánh dấu Rajcok

27

Bạn cũng có thể làm {{xin chào | | 'đang tải ...'}}

— Andrew Joslin

5

@AndyJoslin Đẹp. Với cách tiếp cận này, tập lệnh js góc cần phải nằm trong phần đầu, trái ngược với phần dưới cùng của trang, để tránh biểu thức {{}} không nhấp nháy khi tải trang.

— s_t_e_v_e

51

Để cải thiện tính hiệu quả của phương pháp class = 'ng-cloak' khi các tập lệnh được tải lần cuối, hãy đảm bảo css sau được tải trong phần đầu của tài liệu:

.ng-cloak { display:none; }

— LOAS
nguồn

4

Thêm! Quan trọng là ý tưởng không tồi cũng có.

— eomeroff

12

Sẽ không visibility: hiddentốt hơn sao?

— mở

2

@eomeroff, nhưng !importantlà một hack CSS (điều xấu) để quảng bá một phong cách sẽ được chọn, phải không? Nó phá vỡ các quy tắc chọn CSS.

— Kevin Meredith

5

IMHO đây là một trong những trường hợp quan trọng đã được giới thiệu cho.

— lex82

3

@Mark Tôi đoán rằng "mức độ hiển thị: ẩn" vẫn sẽ hiển thị không gian cần thiết cho đánh dấu mẫu, trong khi "display: none" hoàn toàn không hiển thị bất cứ điều gì. Chỉ với tầm nhìn bị ẩn, bất kỳ yếu tố bên ngoài nào cũng có thể đột ngột sụp đổ về kích thước bên trong thực sự, thay vì tăng lên kích thước từ không có gì. Tôi cho rằng đó là bất cứ điều gì một người thích. :)

— James Wilkins

40

Chỉ cần thêm CSS che giấu vào đầu trang hoặc vào một trong các tệp CSS của bạn:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide {
    display: none !important;
}

Sau đó, bạn có thể sử dụng chỉ thị ngCloak theo thông lệ Angular thông thường và nó sẽ hoạt động ngay cả trước khi chính Angular được tải.

Đây chính xác là những gì Angular làm: mã ở cuối angular.js thêm các quy tắc CSS ở trên vào đầu trang.

— Bennett McElwee
nguồn

+1 Tôi đã tự mình nghĩ ra công [ngcloak]cụ chọn, nhưng việc này hoàn thiện hơn.

— Pierre Henry

1

Câu trả lời tuyệt vời! Tôi tải Angular ở cuối cơ thể, vì vậy ngCloak không có sẵn và nó vẫn nhấp nháy {{}}. Điều này đã sửa nó.

— Scottie

21

Trong css của bạn thêm folllowing

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
 }

Và sau đó trong mã của bạn, bạn có thể thêm chỉ thị ng-cloak. Ví dụ,

<div ng-cloak>
   Welcome {{data.name}}
</div>

Đó là nó!

— Nathan Senevirathne
nguồn

6

Bạn cũng có thể sử dụng ng-attr-src="{{variable}}"thay vì src="{{variable}}"và thuộc tính sẽ chỉ được tạo sau khi trình biên dịch biên dịch các mẫu. Điều này được đề cập ở đây trong tài liệu: https://docs.angularjs.org/guide/directive#-ngattr-attribution-bindings

— Martin Schüller
nguồn

3

Tôi đồng ý với câu trả lời @ pkozlowski.opensource, nhưng lớp ng-clock không hoạt động đối với tôi khi sử dụng với ng-repeat. vì vậy tôi muốn khuyên bạn nên sử dụng lớp cho biểu thức phân cách đơn giản như {{name}} và chỉ thị ngCloak cho ng-repeat.

<div class="ng-cloak">{{name}}<div>

và

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>

— Jaison
nguồn

Cảm ơn vì đã nhận ra lỗi lầm của tôi

— Jaison