Tại sao {{}} không hoạt động trong thuộc tính src? Tại sao tôi cần ngSrc?

Question

này hoạt động:

<a href="{{myAwesomeLink}}">It's a link. A dynamic one, at that.</a> 

Nhưng điều này không:

<img src="{{URLtoMyPerfectImage}}"> 

Một nhu cầu sử dụng ngSrc để thay thế. Tôi có thể biết tại sao đây là trường hợp? Tôi đã có một vấn đề tương tự nhận được một 'src' (hoặc là nó 'href'? Tôi không nhớ) để làm việc trong Handlebars.js và đã từ bỏ nó (áp lực cho giao hàng).

Đây có phải là vấn đề về trình duyệt phổ biến hoặc điều gì đó tương tự không?

Answer 1

Mở rộng câu trả lời ở trên tôi, trong khi

<a href="{{myAwesomeLink}}">It's a link. A dynamic one, at that.</a> 

công trình, nó không phải là thực hành tốt nhất khi động tạo liên kết sử dụng góc. Bất cứ lúc nào bạn sử dụng liên kết dữ liệu trong một thẻ neo, bạn nên sử dụng lệnh ng-href. Vì vậy, các mã cho thẻ neo nên hình như:

<a ng-href="{{myAwesomeLink}}">It's a link. A dynamic one, at that.</a> 

Trực tiếp từ tài liệu góc của:

Sử dụng đánh dấu góc như trong một thuộc tính href làm trang mở tới một URL sai, nếu người dùng nhấp chuột liên kết đó trước khi góc có cơ hội thay thế bằng URL thực, liên kết sẽ bị hỏng và rất có thể sẽ trả lại lỗi 404. Chỉ thị ngHref giải quyết vấn đề này.

này giúp chúng ta hiểu ng-src: Vì vậy, với

<img src="{{imgPath}}"> 

Trình duyệt cố gắng để tải hình ảnh, nhưng góc vẫn chưa thay thế biểu thức trong ngoặc vuông trong src, vì vậy hình ảnh không tải . Bằng cách sử dụng

<img ng-src="{{imgPath}}"> 

bạn đang yêu cầu trình duyệt chờ tải hình ảnh cho đến khi biểu thức khớp được điền vào, do đó tải hình ảnh chính xác.

Answer 2

Các documentation đề cập này

Sử dụng đánh dấu góc như {{}} băm trong một thuộc tính src không hoạt động phải: Trình duyệt sẽ lấy từ URL với các văn bản đen {{băm} } cho đến khi Angular thay thế biểu thức bên trong {{hash}}. Chỉ thị ngSrc giải quyết vấn đề này.

Nếu bạn suy nghĩ kỹ, javascript dữ liệu liên quan đến html của bạn xảy ra sau khi html DOM được tải, để trình duyệt thấy src intial là {{url}} thay vì chuỗi url hợp lệ và không thành công.