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" />

— 오미 케스
소스

1

빠른 답변을 보려면 여기에서 바이올린을보십시오

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

Angular JS를 사용하여 조건부로 제목 위에 요소를 표시합니다.

— 순 다라 프라 부
소스

-4

검색 query모델은 ng-controller="whatever"지시문에 정의 된 범위 내에 있습니다. 따라서 쿼리 모델을에 바인딩하려면 선언을 body 및 title 요소의 공통 부모 인 HTML 요소 <title>로 이동해야합니다 ngController.

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

참조 : https://docs.angularjs.org/tutorial/step_03

— Solidak
소스