AngularJS 지시문에서 속성 액세스

내 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항상을 반환 하는 표현식을 제외하고는 모든 것이 잘 작동합니다 .undefinedtooltipconsole.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)이 정의된다는 것입니다.