[angularjs] AngularJS가 A 태그의 title 속성에 어떻게 바인딩합니까?
의도는 썸네일의 툴팁에 제품 이름이 나타나도록하는 것입니다. 브라우저는 “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 1.1.4 에서는이 경우에 사용할 수 ng-attr있는 새로운 지시문 인 것 같습니다 .
<!-- example -->
<a ng-attr-title="{{product.shortDesc}}"></a>그러나 1.0.7을 유지하면 효과를 반영하는 사용자 지정 지시문을 작성할 수 있습니다.
답변
제목 속성이나 다른 속성에 대한 보간을 사용하는 것은 바람직하지 않습니다. 보간이 수행되기 전에 파싱되기 때문입니다. 그래서:
<!-- dont do this -->
<!-- <a title="{{product.shortDesc}}" ...> -->바인딩이있는 속성 앞에 ngAttr 접두사가 붙은 경우 (ng-attr-로 비정규 화됨) 바인딩 중에 해당 접두사가없는 속성에 적용됩니다. 이를 통해 브라우저에서 열성적으로 처리 할 수있는 속성에 바인딩 할 수 있습니다. 바인딩이 완료된 경우에만 속성이 설정됩니다. 그런 다음 접두사가 제거됩니다.
<!-- do this -->
<a ng-attr-title="{{product.shortDesc}}" ...>이전 버전의 Angular를 사용하고 있지 않은지 확인하십시오. v1.2.2를 사용한 데모 바이올린은 다음과 같습니다.
답변
여기서 문제는 사용중인 AngularJS 버전입니다. ng-attr버전 1.1.4에서 도입 되었기 때문에 작동하지 않습니다. 왜 title="{{product.shortDesc}}"당신을 위해 작동하지 않는지 확실하지 않지만 비슷한 이유로 (구 Angular 버전) 상상합니다. 나는 이것을 1.2.9에서 테스트했고 그것은 나를 위해 일하고있다.
다른 답변에 관해서는, 이것은 몇 가지 유스 케이스가 아닙니다 ng-attr! 이것은 간단한 이중 중괄호 상황입니다.
<a title="{{product.shortDesc}}" ng-bind="product.shortDesc" />답변
빠른 답변을 보려면 여기에서 바이올린을보십시오
data-ng-attr-title="{{d.age > 5 ? 'My age is greater than threshold': ''}}"답변
검색 query모델은 ng-controller="whatever"지시문에 정의 된 범위 내에 있습니다. 따라서 쿼리 모델을에 바인딩하려면 선언을 body 및 title 요소의 공통 부모 인 HTML 요소 <title>로 이동해야합니다 ngController.
<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">
답변
