Làm thế nào để bạn có được AngularJS liên kết với thuộc tính tiêu đề của thẻ A?

131

Mục đích là để tên sản phẩm xuất hiện trong chú giải công cụ của hình thu nhỏ. Các trình duyệt không tạo ra một chú giải công cụ từ "ng-title" hoặc "ng-attr-title."

Chúng tôi đang sử dụng AngularJS phiên bản 1.0.7. Bạn có thể thêm bất kỳ thuộc tính nào bằng "ng-" hoặc "ng-attr" và Angular sẽ liên kết tương ứng. Tuy nhiên, nó dường như không "liên kết" với tiêu đề của thẻ "A" HTML.

Ví dụ. 1.

Mã số: <a title="{{product.shortDesc}}" ...>

Kết quả dự kiến: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Kết quả thực tế: <a title="{{product.shortDesc}}" ...>Chúng tôi nhận được niềng răng không mong muốn trong tooltip.

Ví dụ. 2.

Mã số: <a ng-attr-title="{{product.shortDesc}}" ...>

Kết quả dự kiến: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Kết quả thực tế: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

Chúng tôi không nhận được một titleattirbute đơn giản , chúng tôi cũng không có một công cụ làm việc.

angularjs

— Benxamin
nguồn

228

Có vẻ như ng-attrlà một chỉ thị mới trong AngularJS 1.1.4 mà bạn có thể có thể sử dụng trong trường hợp này.

<!-- example -->
<a ng-attr-title="{{product.shortDesc}}"></a>

Tuy nhiên, nếu bạn ở lại với 1.0.7, có lẽ bạn có thể viết một chỉ thị tùy chỉnh để phản ánh hiệu ứng.

— Nhật Nguyên
nguồn

53

Đôi khi không nên sử dụng phép nội suy trên thuộc tính title hoặc trên bất kỳ thuộc tính nào khác vì vấn đề đó, vì chúng được phân tích cú pháp trước khi quá trình nội suy diễn ra. Vì thế:

<!-- dont do this -->
<!-- <a title="{{product.shortDesc}}" ...> -->

Nếu một thuộc tính có liên kết được tiền tố với tiền tố ngAttr (không được chuẩn hóa là ng-attr-) thì trong quá trình liên kết sẽ được áp dụng cho thuộc tính không được trộn sẵn tương ứng. Điều này cho phép bạn liên kết với các thuộc tính mà các trình duyệt sẽ háo hức xử lý. Thuộc tính sẽ chỉ được đặt khi liên kết được thực hiện. Tiền tố sau đó được xóa:

<!-- do this -->
<a ng-attr-title="{{product.shortDesc}}" ...>

(Đảm bảo rằng bạn không sử dụng phiên bản Angular rất sớm). Đây là một fiddle demo sử dụng v1.2.2:

Fiddle

— Luôn luôn học hỏi
nguồn

3

Vấn đề ở đây là phiên bản AngularJS của bạn; ng-attrkhông hoạt động do thực tế là nó đã được giới thiệu trong phiên bản 1.1.4. Tôi không chắc tại sao title="{{product.shortDesc}}"không làm việc cho bạn, nhưng tôi tưởng tượng đó là vì những lý do tương tự (phiên bản Angular cũ). Tôi đã thử nghiệm điều này vào ngày 1.2.9 và nó đang hoạt động với tôi.

Đối với các câu trả lời khác ở đây, đây KHÔNG phải là một trong số ít các trường hợp sử dụng cho ng-attr! Đây là một tình huống ngoặc kép đơn giản:

<a title="{{product.shortDesc}}" ng-bind="product.shortDesc" />

— giống nhau
nguồn

1

Nhìn vào câu đố ở đây để có câu trả lời nhanh

data-ng-attr-title="{{d.age > 5 ? 'My age is greater than threshold': ''}}"

Hiển thị Tiêu đề trên các phần tử có điều kiện bằng cách sử dụng Angular JS

— Sundara Mitchu
nguồn

-4

queryMô hình tìm kiếm sống trong phạm vi được xác định bởi ng-controller="whatever"chỉ thị. Vì vậy, nếu bạn muốn liên kết mô hình truy vấn <title>, bạn phải di chuyển ngControllerkhai báo sang một phần tử HTML là cha mẹ chung cho cả hai thành phần thân và tiêu đề:

<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">

Tham chiếu: https://docs.angularjs.org/tutorial/step_03

— rắn
nguồn