IT

AngularJS와 함께 부트 도구 설명 사용

lottoking 2020. 9. 6. 10:19
반응형

AngularJS와 함께 부트 도구 설명 사용

내 앱에서 Bootstrap 툴팁을 사용하려고합니다. 내 앱은 AngularJS를 사용하고 있습니다. 현재 다음이 있습니다.

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left">
            Tooltip on left
</button>

사용할 필요가 있더라도 생각합니다 

$("[data-toggle=tooltip]").tooltip();

확실하지 않습니다. 위의 줄을 추가해도 내 코드가 작동하지 않습니다. 필요한 것보다 더 많은 UI 부트를 사용하지 않습니다. 그러나 툴팁 부분 만 포함해야한다면 열려 있습니다. 하지만 어떻게 해야할지 모르겠습니다.

누군가가 AngularJS와 함께 작동하는 Bootstrap Tooltip을 얻는 방법을 보여줄 수 있습니까?

툴팁이 처음부터 작동하도록 애드워즈 코드에서 초기화해야합니다. AngularJS를 잠시 무시하면 다음과 같이 jQuery에서 도구 설명을 사용할 수 있습니다.

$(document).ready(function(){
    $('[data-toggle=tooltip]').hover(function(){
        // on mouseenter
        $(this).tooltip('show');
    }, function(){
        // on mouseleave
        $(this).tooltip('hide');
    });
});

Angular가 아닌 한 콘텐츠 (예 : ng-repeat)가 아닌 한 AngularJS 앱이 작동합니다. 이 경우 처리하기 위해 지시문을 작성해야합니다. 나를 위해 일한 간단한 지시문은 다음과 가능합니다.

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.hover(function(){
                // on mouseenter
                element.tooltip('show');
            }, function(){
                // on mouseleave
                element.tooltip('hide');
            });
        }
    };
});

그런 다음 도구 설명을 표시 할 요소에 "tooltip"속성을 포함하기 만하면됩니다.

<a href="#0" title="My Tooltip!" data-toggle="tooltip" data-placement="top" tooltip>My Tooltip Link</a>

도움이되기를 바랍니다.

내가 생각하는 해낼 수없는 최고의 솔루션은 다음과 같이 요소에 "onmouseenter"속성을 포함하는 것입니다.

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>

간단한 대답 - UI 부트 스트랩 (사용 ui.bootstrap.tooltip를 )

이 질문에 대한 매우 복잡한 답변이 많이있는 것입니다. 여기에 저에게 맞는.

  1. UI 부트 설치 설치 -$ bower install angular-bootstrap

  2. UI 부트를 구현으로 삽입- angular.module('myModule', ['ui.bootstrap']);

  3. 사용 UIB-툴팁 지시어를 당신의 HTML에.

<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>

Angular 앱을 빌드하는 경우 jQuery 를 사용할 수 있으며 더 각도 중심의 패러다임을 선호하기 위해 피해야하는 많은 이유가 있습니다. UI 부트 에서 제공하는 스타일을 계속 사용할 수 있습니다.

Boostrap CSS 파일, Angular.js 및 ui.Bootstrap.js를 포함합니다.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

ui.bootstrap다음과 같이 모듈을 만들 때 전면 확인하십시오 .

var app = angular.module('plunker', ['ui.bootstrap']);

그런 다음 jQuery가 선택한 데이터 속성 대신 각도 지시문을 사용할 수 있습니다.

<button type="button" class="btn btn-default" 
        title="Tooltip on left" data-toggle="tooltip" data-placement="left"
        tooltip="Tooltip on left" tooltip-placement="left" >
  Tooltip on left
</button>

Plunker 데모

UI 부트 성공 피하기

jQuery.min.js (94kb) + Bootstrap.min.js (32kb) 는 필요한 것보다 더 많은 것을 제공하며 ui-bootstrap.min.js (41kb) 보다 훨씬 더 많은 것을 제공 합니다.

그리고 모듈 다운로드에 소요되는 시간은 성능의 한 소요 일뿐입니다.

필요한 모듈 만로드하고 페이지에서 "Create a Build"를 선택하고 Bootstrap-UI 웹 사이트 에서 툴팁을 선택할 수 있습니다 . 또는 도구 설명에 대한 소스 코드를 탐색 하고 원하는 것을 선택할 수 있습니다.

툴팁과 템플릿 만있는 축소 된 사용자 지정 빌드 (6kb)

Bootstrap JS와 jQuery를 포함 ... 

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

아직로드하지 않았다면 Angular UI ( http://angular-ui.github.io/bootstrap/ )가 많은 오버 헤드가 아닐 수 있습니다. Angular 앱과 함께 사용하고 툴팁 지시문이 있습니다. 용도tooltip="tiptext" 

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left"
        tooltip="This is a Bootstrap tooltip"
        tooltip-placement="left" >
            Tooltip on left
</button>

저는 우리에게 잘 작동하는 간단한 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를 이미 사용하고 전체 앱에서 기본 도구를 설명하는 브리지가 필요합니다. 컨트롤러 수정 또는 마우스 이벤트 관리.

동적 단일 페이지 애플리케이션에 대한 selector 옵션 을 사용할 수 있습니다 .

jQuery(function($) {
    $(document).tooltip({
        selector: '[data-toggle="tooltip"]'
    });
});

선택기가 제공하는 경우 도구 설명 개체가 전달 대상에 전달됩니다. 실제로 이것은 도구 설명이 추가 된 동적 HTML 콘텐츠를 활성화하는 데 사용됩니다.

다음과 같은 간단한 지시문을 만들 수 있습니다.

angular.module('myApp',[])
    .directive('myTooltip', function(){
        return {
            restrict: 'A',
            link: function(scope, element){
                element.tooltip();
            }
        }
    });

그런 다음 필요한 곳에 사용자 지정 지시문을 추가합니다.

<button my-tooltip></button>

AngularStrap 있는 사용자는 작업을 수행 할 수 있습니다.

는 Bootstrap 3.0+를 AngularJS 1.2+ 앱에 원활하게 통합 할 수있는 기본 지시문 집합입니다. "

다음과 같이 전체 라이브러리를 삽입 할 수 있습니다.

var app = angular.module('MyApp', ['mgcrea.ngStrap']);

또는 다음과 같이 툴팁 기능 만 가져옵니다. 

var app = angular.module('MyApp', ['mgcrea.ngStrap.tooltip']);

스택 스 니펫의 데모

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>

가장 쉬운 방법 $("[data-toggle=tooltip]").tooltip();은 관련 컨트롤러에 추가 하는 것입니다.

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>

angularjs에서 부트 스트랩 툴팁을 사용하려면 jquery-ui도 사용하는 경우 스크립트 순서가 있어야합니다.

  • jQuery
  • jQuery UI
  • Bootstap

시도되고 테스트되었습니다.

툴팁을 동적으로 할당하는 경우에만 이것을 읽으십시오.

즉 <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

항상 뷰로 업데이트되지 않는 동적 도구 설명에 문제가있었습니다. 예를 들어, 다음과 같은 작업을했습니다.

일관되게 작동하지 않았습니다.

<div ng-repeat="person in people">
    <span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
      {{ person.name }}
    </span> 
</div>

다음과 같이 활성화합니다. 

$timeout(function() {
  $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)

그러나 내 사람들 배열이 변경되므로 도구 설명이 항상 업데이트되는 것은 아닙니다. 이 스레드와 다른 스레드에서 모든 수정을 시도했지만 운이 없었습니다. 결함은 약 5 %의 시간 동안 만 발생하는 것처럼 보였으며 반복하기가 거의 불가능했습니다.

안타깝게도 이러한 툴팁은 내 프로젝트에 중요하며 잘못된 툴팁을 표시하는 것은 매우 나쁠 수 있습니다.

문제인 것 같던 것

부트 스트랩은 title속성 값을 새 속성 에 복사 하고 톨팁을 활성화 할 때 속성을 data-original-title제거 title했습니다 (때로는). 그러나 내가 title={{ person.tooltip }}변경할 때 새 값이 항상 속성으로 업데이트되는 것은 아닙니다 data-original-title. 툴팁을 비활성화하고 다시 활성화하고, 파괴하고,이 속성에 직접 바인딩했습니다. 그러나 이들 각각은 작동하지 않거나 새로운 문제를 만들었습니다. 예를로 title하고 data-original-title모두 제거되는 내 개체에서 유엔이 바인딩 속성.

작동 한 것

아마도 내가 지금까지 밀어 낸 코드 중 가장 추악한 코드 일 것입니다. 그러나 그것은이 작지만 실질적인 문제를 해결했습니다. 툴팁이 새 데이터로 업데이트 될 때마다이 코드를 실행합니다.

$timeout(function() {
    $('[data-toggle="tooltip"]').each(function(index) {
      // sometimes the title is blank for no apparent reason. don't override in these cases.
      if ($(this).attr("title").length > 0) {
        $( this ).attr("data-original-title", $(this).attr("title"));
      }
    });
    $timeout(function() {
      // finally, activate the tooltips
      $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
    }, 500);
}, 1500);

본질적으로 여기서 일어나는 일은 다음과 같습니다.

  • 다이제스트주기가 완료되고 titles가 업데이트 될 때까지 잠시 (1500ms) 기다 립니다.
  • 가 있다면 title(즉이 변경되었습니다) 비어 있지 않은 속성의에 복사 data-original-title가 부트 스트랩의 toolips에 의해 선택 될 수 있도록 속성입니다.
  • 툴팁 재 활성화

이 긴 답변이 저처럼 어려움을 겪고 있었던 사람에게 도움이되기를 바랍니다.

도구 설명 (ui.bootstrap.tooltip)을 사용해보십시오. Bootstrap에 대한 Angular 지시문 참조

<button type="button" class="btn btn-default" tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>

AngularJS 위에 JavaScript 코드를 사용하지 않는 것이 좋습니다.

AngularStrap은 angularjs 버전 1.2.9를 사용하는 IE8에서 작동하지 않으므로 응용 프로그램이 IE8을 지원해야하는 경우 사용하지 마십시오.

@aStewartDesign 답변 개선 :

.directive('tooltip', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      element.hover(function(){
        element.tooltip('show');
      }, function(){
        element.tooltip('hide');
      });
    }
  };
});

jquery가 필요하지 않습니다. 늦은 anwser이지만 가장 많이 득표 한 것이므로 이것을 지적해야합니다.

종속성을 설치하십시오.

npm install jquery --save
npm install tether --save
npm install bootstrap@version --save;

다음으로 angular-cli.json에 스크립트를 추가하십시오.

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "script.js"
    ]

그런 다음 script.js를 만듭니다.

$("[data-toggle=tooltip]").tooltip();

이제 서버를 다시 시작하십시오.

모델이 변경 될 때 도구 설명을 새로 고치려면data-original-title 대신을 사용 합니다 title.

예 :

<i class="fa fa-gift" data-toggle="tooltip" data-html="true" data-original-title={{getGiftMessage(gift)}} ></i>

다음과 같은 툴팁 사용을 초기화하고 있습니다.

<script type="text/javascript">
    $(function () {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    })
</script>

버전 :

  • AngularJS 1.4.10
  • 부트 스트랩 3.1.1
  • jquery : 1.11.0

참고 URL : https://stackoverflow.com/questions/20666900/using-bootstrap-tooltip-with-angularjs

반응형

'IT' 카테고리의 다른 글

iOS- 새로운 인수와 afterDelay를 사용하여 performSelector를 구현하는 방법은 무엇입니까?  (0) 2020.09.06
반응의 상태 배열에서 항목 삭제  (0) 2020.09.06
PHP를 사용하여 동적으로 QR 코드 생성  (0) 2020.09.06
UITableView는 스 와이프하여 방식 수 없지만 여전히 편집 모드에서 삭제가 있습니까?  (0) 2020.09.06
"백 스페이스"이스케이프 문자 '\ b': 선택하지 않은 동작?  (0) 2020.09.06

'IT'의 다른글

  • 현재글AngularJS와 함께 부트 도구 설명 사용

관련글

댓글

티스토리툴바