[angularjs] AngularJS와 함께 부트 스트랩 도구 설명 사용

저는 우리에게 잘 작동하는 간단한 Angular Directive를 작성했습니다.

데모 : http://jsbin.com/tesido/edit?html,js,output

지시문 (부트 스트랩 3 용) :

// registers native Twitter Bootstrap 3 tooltips
app.directive('bootstrapTooltip', function() {
  return function(scope, element, attrs) {
    attrs.$observe('title',function(title){
      // Destroy any existing tooltips (otherwise new ones won't get initialized)
      element.tooltip('destroy');
      // Only initialize the tooltip if there's text (prevents empty tooltips)
      if (jQuery.trim(title)) element.tooltip();
    })
    element.on('$destroy', function() {
      element.tooltip('destroy');
      delete attrs.$$observers['title'];
    });
  }
});

참고 : Bootstrap 4를 사용하는 경우 위의 6 및 11 행 tooltip('destroy')에서 tooltip('dispose')( 이 업데이트에 대해 user1191559에게 감사드립니다 )

bootstrap-tooltip를 사용하여 요소에 속성으로 추가 하기 만하면 됩니다 title. Angular는의 변경 사항을 모니터링 title하지만 그렇지 않으면 툴팁 처리를 부트 스트랩으로 전달합니다.

또한 기본 부트 스트랩 도구 설명 옵션 을 data-일반 부트 스트랩 방식의 속성 으로 사용할 수 있습니다 .

마크 업 :

<div bootstrap-tooltip data-placement="left" title="Tooltip on left">
        Tooltip on left
</div>

분명히 이것은 AngularStrap 및 UI Bootstrap이 제공하는 정교한 바인딩 및 고급 통합을 모두 가지고 있지는 않지만 Angular 앱에서 Bootstrap의 JS를 이미 사용하고 있고 전체 앱에 기본 도구 설명 브리지가 필요한 경우 좋은 솔루션입니다. 컨트롤러 수정 또는 마우스 이벤트 관리.