내 AngularJS 템플릿에는 다음과 같은 사용자 지정 HTML 구문이 포함되어 있습니다.
<su-label tooltip="{{field.su_documentation}}">{{field.su_name}}</su-label>
그것을 처리하는 지시문을 만들었습니다.
.directive('suLabel', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
title: '@tooltip'
},
template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
link: function(scope, element, attrs) {
if (attrs.tooltip) {
element.addClass('tooltip-title');
}
},
}
})
를 수행 할 때 속성이 Google 크롬의 자바 스크립트 콘솔에 표시 되더라도 attrs.tooltip
항상을 반환 하는 표현식을 제외하고는 모든 것이 잘 작동합니다 .undefined
tooltip
console.log(attrs)
어떠한 제안?
업데이트 : Artem에서 솔루션을 제공했습니다. 다음과 같이 구성되었습니다.
link: function(scope, element, attrs) {
attrs.$observe('tooltip', function(value) {
if (value) {
element.addClass('tooltip-title');
}
});
}
AngularJS + stackoverflow = 행복
답변
지시문에 대한 문서의 속성 섹션을 참조하십시오 .
보간 된 속성 관찰 : $ observe를 사용 하여 보간 을 포함하는 속성의 값 변경을 관찰합니다 (예 : src = “{{bar}}”). 이것은 매우 효율적일뿐만 아니라 연결 단계 동안 보간이 아직 평가되지 않았으므로 현재 값이 정의되지 않음으로 설정되어 있기 때문에 실제 값을 쉽게 얻을 수있는 유일한 방법이기도합니다.
답변
특정 시나리오에 ‘=’를 사용하는 것보다 ‘@’를 사용하는 것이 더 적절하지만, 때때로 attrs. $ observe ()를 사용하는 것을 기억할 필요가 없도록 ‘=’를 사용합니다.
<su-label tooltip="field.su_documentation">{{field.su_name}}</su-label>
지령:
myApp.directive('suLabel', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
title: '=tooltip'
},
template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
link: function(scope, element, attrs) {
if (scope.title) {
element.addClass('tooltip-title');
}
},
}
});
바이올린 .
‘=’을 사용하면 양방향 데이터 바인딩이 제공되므로 scope.title이 지시문에서 실수로 수정되지 않도록주의해야합니다. 장점은 연결 단계 중에 로컬 범위 속성 (scope.title)이 정의된다는 것입니다.