AngularJSをAタグのtitle属性にバインドするにはどうすればよいですか？

131

その目的は、サムネイルのツールチップに製品名を表示することです。ブラウザは、「ng-title」または「ng-attr-title」からツールチップを作成しません。

AngularJSバージョン1.0.7を使用しています。「ng-」または「ng-attr」を任意の属性の前に付けると、Angularがそれに応じてバインドします。ただし、HTMLの「A」タグのタイトル属性に「バインド」されていないようです。

例 1。

コード： <a title="{{product.shortDesc}}" ...>

期待される結果： <a title="Canon Powershot XS50 12MB Digital Camera" ...>

実際の結果：<a title="{{product.shortDesc}}" ...>ツールチップに不要な括弧が表示されます。

例 2。

コード： <a ng-attr-title="{{product.shortDesc}}" ...>

期待される結果： <a title="Canon Powershot XS50 12MB Digital Camera" ...>

実結果： <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

私たちは単純なtitle態度を得ることも、実用的なツールチップを得ることもありません。

angularjs 
— ベンキサミン
ソース

回答:

228

このような場合に使用できるAngularJS 1.1.4のng-attr新しいディレクティブのようです。

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

ただし、1.0.7のままである場合は、効果を反映するカスタムディレクティブを作成できます。

— ニャットグエン
ソース
53

タイトル属性またはその他の属性に対して補間を使用することは、補間が行われる前に解析されるため、望ましくない場合があります。そう：

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

バインディングを持つ属性の前にngAttrプレフィックス（ng-attr-として非正規化）が付いている場合、バインディング中に、対応するプレフィックスのない属性に適用されます。これにより、ブラウザで積極的に処理される属性にバインドできます。属性は、バインドが完了したときにのみ設定されます。その後、プレフィックスが削除されます。

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

（Angularのごく初期のバージョンを使用していないことを確認してください）。以下は、v1.2.2を使用したデモのフィドルです。

Fiddle

— AlwaysALearner
ソース
3

ここでの問題は、AngularJSのバージョンです。ng-attrバージョン1.1.4で導入されたため、機能していません。なぜだかわかりませんtitle="{{product.shortDesc}}"がうまくいかないはませんが、同じような理由であると思います（古いAngularバージョン）。私はこれを1.2.9でテストしましたが、うまくいきました。

ここでの他の回答については、これはng-attr！これは、単純な二重中括弧の状況です。

<a title="{{product.shortDesc}}" ng-bind="product.shortDesc" />
— 省略
ソース
-4

検索queryモデルは、ng-controller="whatever"ディレクティブで定義されたスコープ内にあります。したがって、クエリモデルをにバインドする<title>場合は、ngController、body要素とtitle要素の両方の共通の親であるHTML要素に宣言をあります。

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

参照：https : //docs.angularjs.org/tutorial/step_03

— Solidak
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.