사용자 지정 이벤트에서 angular-ui 도구 설명 사용

사용자 지정 이벤트에서 angular-ui 도구 설명 사용

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

예를 들어 다음과 같습니다.

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

요령이 있어요.

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

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

그래서 언제username$190입니다.tooltip-trigger표현은 에 대해 평가됩니다.'mouseenter'툴팁이 표시됩니다.그렇지 않으면 트리거는 다음과 같이 평가됩니다.'never'그러면 툴팁이 활성화되지 않습니다.

편집:

@coten (댓글)에서는 모델이 유효해도 툴팁이 막혀 없어지지 않는 시나리오를 언급하고 있습니다.이 문제는 텍스트가 입력되는 동안 마우스가 입력 필드 위에 있을 때 발생합니다(모델이 유효하게 됩니다).모델 검증이 true로 평가되는 즉시tooltip-trigger"never"로 전환됩니다.

UI 부트스트랩은 이른바triggerMap툴팁을 표시하거나 숨길 마우스 이벤트를 결정합니다.

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

보시다시피 이 맵은 "절대" 이벤트에 대해 아무것도 모르기 때문에 툴팁을 닫을 시기를 결정할 수 없습니다.따라서 트릭 플레이를 적절하게 수행하기 위해서는 자체 이벤트 쌍으로 이 맵을 업데이트하면 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 툴팁이 표시됩니다.

새로운 버전의 문서에서는 아래의 HTML을 사용하는 것을 제안합니다.최신 버전에서는 steewie의 답변은 도움이 되지 않습니다.

<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" />

.tooltip-is-open="formname.name.$invalid"

가도 돼

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