Angular에서 속성 액세스JS 지시어

Angular에서 속성 액세스JS 지시어

마이 앵글JS 템플릿에는 다음과 같은 몇 가지 커스텀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');
      }
    },
  }
})

모든 것이 정상적으로 동작합니다.단,attrs.tooltipexpression: 항상 반환되는undefined단,tooltip속성을 Google Chrome의 JavaScript 콘솔에서 볼 수 있습니다.console.log(attrs).

제안해 주실 수 있나요?

업데이트: Artem이 솔루션을 제안했습니다.다음과 같이 구성되었습니다.

link: function(scope, element, attrs) {
  attrs.$observe('tooltip', function(value) {
    if (value) {
      element.addClass('tooltip-title');
    }
  });
}

AngularJS + 스택오버플로우 = 블리스

지시사항에 대한 설명서의 속성 섹션을 참조하십시오.

보간 속성 관찰:보간(예: src="{{bar}})을 포함하는 특성의 값 변화를 관찰하려면 $120을 사용하십시오.이 방법은 매우 효율적일 뿐만 아니라 링크 단계 동안 보간이 아직 평가되지 않았기 때문에 실제 값을 쉽게 얻을 수 있는 유일한 방법입니다. 따라서 현재 값은 정의되지 않음으로 설정됩니다.

특정 시나리오에서는 '='를 사용하는 것보다 '@'를 사용하는 것이 더 적절하지만, 애트리뷰트를 사용하는 것을 잊지 않도록 '='를 사용하는 경우도 있습니다.$syslog():

<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.discape가 잘못 수정되지 않도록 주의해야 합니다.장점은 링크 단계 중에 로컬 스코프 속성(scope.title)이 정의된다는 것입니다.

언급URL : https://stackoverflow.com/questions/11913841/accessing-attributes-from-an-angularjs-directive