사용자 지정 이벤트에서 각도 UI 도구 설명 사용

사용자 지정 이벤트에서 각도 UI 도구 설명 사용

---

angular-ui의 툴팁 기능을 사용하여 특정 필드가 유효하지 않다는 것을 사용자에게 보여 주려고하는데 툴팁은 미리 정의 된 일부 트리거에서만 표시 될 수있는 것 같습니다. 해당 트리거를 제외하고 툴팁을 트리거 할 수있는 방법이 있습니까?

예를 들면 :

<input
    type="text"
    tooltip="Invalid name!"
    tooltip-position="right"
    tooltip-trigger="myForm.username.$invalid">

---

여기에 트릭이 있습니다.

Angular-UI가 의존하는 Twitter Bootstrap 툴팁 에는 .NET과 같은 추가 속성으로 트리거 이벤트를 지정하는 옵션이 data-trigger="mouseenter"있습니다. 이것은 (Angular를 사용하여) 프로그래밍 방식으로 트리거를 변경하는 방법을 제공합니다.

<input 
  ng-model="user.username"
  name="username"
  tooltip="Some text" 
  tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.username.$invalid]}}" 
/>

따라서 username$ invalid이면 tooltip-trigger표현식이로 평가 'mouseenter'되고 툴팁이 표시됩니다. 그렇지 않으면 트리거가 'never'툴팁을 실행하지 않는 것으로 평가됩니다 .

편집하다:

@cotten (주석에서)은 모델이 유효하더라도 툴팁이 멈추고 사라지지 않는 시나리오를 언급합니다. 이것은 텍스트를 입력하는 동안 마우스가 입력 필드 위에있을 때 발생합니다 (그리고 모델이 유효 해짐). 모델 유효성 검사가 참으로 평가되는 즉시 tooltip-trigger"없음"으로 전환됩니다.

UI Bootstrap은 triggerMap툴팁을 표시하거나 숨길 마우스 이벤트를 결정하기 위해 소위 를 사용합니다 .

// Default hide triggers for each show trigger
var triggerMap = {
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur'
};

보시다시피이 맵은 "never"이벤트에 대해 아무것도 모르기 때문에 툴팁을 닫을시기를 결정할 수 없습니다. 따라서 트릭 플레이를 멋지게 만들려면이 맵을 자체 이벤트 쌍으로 업데이트하기 만하면됩니다. 그러면 UI 부트 스트랩이 tooltip-trigger가 "never"로 설정 되었을 때 툴팁을 닫기 위해 관찰 할 이벤트를 알게됩니다 .

app.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.setTriggers({
    'mouseenter': 'mouseleave',
    'click': 'click',
    'focus': 'blur',
    'never': 'mouseleave' // <- This ensures the tooltip will go away on mouseleave
  });
}]);

PLUNKER

_{참고 : $ tooltip 공급자는 "ui.bootstrap.tooltip"모듈에 의해 노출되며이를 통해 앱 구성에서 도구 설명을 전역 적으로 구성 할 수 있습니다.}

---

나는 다른 것을 시도했다

tooltip="{{(myForm.input1id.$invalid) ? 'You have an error with this field' : ''}}"

이런 식으로 내 도구 설명은 입력이 유효하지 않을 때만 쓰여지고 아무것도 작성되지 않은 경우 도구 설명이 표시되지 않습니다.

---

버전 0.12.0부터는 tooltip-tigger더 이상 관찰 할 수 없습니다 (프로그래밍 방식으로 변경할 수 없음).

tooltip-enable동일한 동작을 얻기 위해 사용할 수 있습니다 . 자세한 내용은 https://github.com/angular-ui/bootstrap/issues/3372에서 확인하세요.

---

필드 tooltip-enable대신을 추가 할 수도 있습니다 tooltip-trigger.

<input
    type="text"
    tooltip="Invalid name!"
    tooltip-position="right"
    tooltip-enable="{{myForm.username.$invalid}}">

이 경우 사용자 이름이 유효하지 않으면 ($ invalid returns true) 툴팁이 나타납니다.

---

As per the new version document I will suggest to use below HTML. stewie's answer is not helpful with latest version.

<input class="form-control" name="name" type="text" required ng-model="name"
                   uib-tooltip="name required" tooltip-is-open="formname.name.$invalid" 
tooltip-trigger="none" tooltip-placement="auto top" />

Replace just your form name in tooltip-is-open="formname.name.$invalid"

you are good to go.

참고URL : https://stackoverflow.com/questions/16651227/enable-angular-ui-tooltip-on-custom-events