표현식을 기반으로 각도를 사용하여 팝오버(또는 툴팁)를 동적으로 열거나 닫는 좋은 방법?
각진 형태로 배선되어 검증에 사용되고 있습니다.다음과 같이 ng-show 지시어를 사용하여 오류 메시지를 표시할 수 있습니다.
<span ng-show="t3.f.needsAttention(f.fieldName)" ng-cloak>
<span ng-show="f.fieldName.$error.required && !f.fieldName.$viewValue">
This field is required.
</span>
</span>
서..어디에ft3 시도이 포함되어 .
대신 팝오버 내에 확인 메시지를 표시하려고 합니다.부트스트랩의 네이티브 팝오버 또는 UI 부트스트랩의 팝오버 중 하나를 로드했습니다.만약 그 lib를 사용하는 것이 더 쉽다면, 나는 Angular Strap을 고려할 수도 있다.
제가 지금 어려움을 겪고 있는 것은 팝오버의 일반적인 특성입니다. 팝오버는 클릭, 마우스 입력, 흐림 등의 사용자 이벤트에 따라 자동으로 재생됩니다.위의 ng-show 속성의 동일한 함수를 기반으로 팝오버를 표시하거나 숨깁니다.표현식이 false를 반환하면 숨기고 true를 반환하면 표시합니다.
부트스트랩에 .popover('show')가 있는 것은 알지만, 돔에 대해 angular하게 말하면 안 되기 때문에 $(element)에 어떻게 접근할 수 있을지 잘 모르겠습니다.커스텀 폼컨트롤러 함수로 이것을 실행하는 경우 popover()를 지정합니다.내가 뭘 빼놓았나요?
갱신하다
중복투표에서 언급된 솔루션은 여전히 마우스 입력 시 팝업만 보여줍니다.시키고 싶다.$('#popover_id').popover('show').
독자적인 확장 트리거를 작성할 수도 있습니다.이것은 툴팁과 팝오버 모두에 적용됩니다.
먼저 다음과 같이 Tooltip 트리거를 확장합니다.
// define additional triggers on Tooltip and Popover
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'show': 'hide'
});
}]);
다음으로 HTML 태그의 트리거를 다음과 같이 정의합니다.
<div id="RegisterHelp" popover-trigger="show" popover-placement="left" popover="{{ 'Login or register here'}}">
이제 JavaScript에서 hide and show를 호출할 수 있게 되었습니다.이것은 3초 후에 방송됩니다.
$("#RegisterHelp").trigger('show');
//Close the info again
$timeout(function () {
$("#RegisterHelp").trigger('hide');
}, 3000);
ui-bootstrap 툴팁이나 팝오버를 커스텀 디렉티브로 장식하는 것은 그다지 어렵지 않습니다.이것은 타이프스크립트로 쓰여져 있습니다만, javascript 부분은 분명합니다.이 코드 조각은 툴팁 또는 팝오버 중 하나를 장식하는 데 사용됩니다.
'use strict';
module App.Directives.TooltipToggle {
export interface DirectiveSettings {
directiveName: string;
directive: any[];
directiveConfig?: any[];
}
export function directiveSettings(tooltipOrPopover = 'tooltip'): DirectiveSettings {
var directiveName = tooltipOrPopover;
// events to handle show & hide of the tooltip or popover
var showEvent = 'show-' + directiveName;
var hideEvent = 'hide-' + directiveName;
// set up custom triggers
var directiveConfig = ['$tooltipProvider', ($tooltipProvider: ng.ui.bootstrap.ITooltipProvider): void => {
var trigger = {};
trigger[showEvent] = hideEvent;
$tooltipProvider.setTriggers(trigger);
}];
var directiveFactory = (): any[] => {
return ['$timeout', ($timeout: ng.ITimeoutService): ng.IDirective => {
var d: ng.IDirective = {
name: directiveName,
restrict: 'A',
link: (scope: ng.IScope, element: JQuery, attr: ng.IAttributes) => {
if (angular.isUndefined(attr[directiveName + 'Toggle'])) return;
// set the trigger to the custom show trigger
attr[directiveName + 'Trigger'] = showEvent;
// redraw the popover when responsive UI moves its source
var redrawPromise: ng.IPromise<void>;
$(window).on('resize', (): void => {
if (redrawPromise) $timeout.cancel(redrawPromise);
redrawPromise = $timeout((): void => {
if (!scope['tt_isOpen']) return;
element.triggerHandler(hideEvent);
element.triggerHandler(showEvent);
}, 100);
});
scope.$watch(attr[directiveName + 'Toggle'], (value: boolean): void => {
if (value && !scope['tt_isOpen']) {
// tooltip provider will call scope.$apply, so need to get out of this digest cycle first
$timeout((): void => {
element.triggerHandler(showEvent);
});
}
else if (!value && scope['tt_isOpen']) {
$timeout((): void => {
element.triggerHandler(hideEvent);
});
}
});
}
};
return d;
}];
};
var directive = directiveFactory();
var directiveSettings: DirectiveSettings = {
directiveName: directiveName,
directive: directive,
directiveConfig: directiveConfig,
};
return directiveSettings;
}
}
이 단일 코드를 사용하여 다음과 같이 툴팁 또는 팝오버의 프로그램 숨김 및 표시를 설정할 수 있습니다.
var tooltipToggle = App.Directives.TooltipToggle.directiveSettings();
var popoverToggle = App.Directives.TooltipToggle.directiveSettings('popover');
var myModule = angular.module('my-mod', ['ui.bootstrap.popover', 'ui.bootstrap.tpls'])
.directive(tooltipToggle.directiveName, tooltipToggle.directive)
.config(tooltipToggle.directiveConfig)
.directive(popoverToggle.directiveName, popoverToggle.directive)
.config(popoverToggle.directiveConfig);
사용방법:
<span tooltip="This field is required."
tooltip-toggle="formName.fieldName.$error.required"
tooltip-animation="false" tooltip-placement="right"></span>
또는
<span popover="This field is required."
popover-toggle="formName.fieldName.$error.required"
popover-animation="false" popover-placement="right"></span>
따라서 ui-bootstrap 툴팁 또는 팝오버와 함께 제공되는 다른 모든 것을 재사용하여-toggle기여하다.장식 디렉티브는 해당 속성을 감시하고 표시 또는 숨기기 위한 커스텀이벤트를 기동합니다이 이벤트는 UI 부트스트랩툴팁 공급자에 의해 처리됩니다.
업데이트:
이 답변은 다른 사람에게 도움이 되는 것 같기 때문에 javascript로 작성된 코드입니다(위의 타이프 스크립트는 이 javascript에 거의 컴파일되어 있습니다).
'use strict';
function directiveSettings(tooltipOrPopover) {
if (typeof tooltipOrPopover === "undefined") {
tooltipOrPopover = 'tooltip';
}
var directiveName = tooltipOrPopover;
// events to handle show & hide of the tooltip or popover
var showEvent = 'show-' + directiveName;
var hideEvent = 'hide-' + directiveName;
// set up custom triggers
var directiveConfig = ['$tooltipProvider', function ($tooltipProvider) {
var trigger = {};
trigger[showEvent] = hideEvent;
$tooltipProvider.setTriggers(trigger);
}];
var directiveFactory = function() {
return ['$timeout', function($timeout) {
var d = {
name: directiveName,
restrict: 'A',
link: function(scope, element, attr) {
if (angular.isUndefined(attr[directiveName + 'Toggle']))
return;
// set the trigger to the custom show trigger
attr[directiveName + 'Trigger'] = showEvent;
// redraw the popover when responsive UI moves its source
var redrawPromise;
$(window).on('resize', function() {
if (redrawPromise) $timeout.cancel(redrawPromise);
redrawPromise = $timeout(function() {
if (!scope['tt_isOpen']) return;
element.triggerHandler(hideEvent);
element.triggerHandler(showEvent);
}, 100);
});
scope.$watch(attr[directiveName + 'Toggle'], function(value) {
if (value && !scope['tt_isOpen']) {
// tooltip provider will call scope.$apply, so need to get out of this digest cycle first
$timeout(function() {
element.triggerHandler(showEvent);
});
}
else if (!value && scope['tt_isOpen']) {
$timeout(function() {
element.triggerHandler(hideEvent);
});
}
});
}
};
return d;
}];
};
var directive = directiveFactory();
var directiveSettings = {
directiveName: directiveName,
directive: directive,
directiveConfig: directiveConfig,
};
return directiveSettings;
}
위해서ui.bootstrap0.13.4 이후:
새로운 파라미터(popover-is-open)는 관계자의 팝오버를 제어하기 위해 도입되었습니다.ui.bootstraprepo. 최신 버전에서는 다음과 같이 사용합니다.
<a uib-popover="Hello world!" popover-is-open="isOpen" ng-click="isOpen = !isOpen">
Click me to show the popover!
</a>
위해서ui.bootstrap0.13.3 이전:
방금 GitHub의 팝오버에 대한 제어를 강화하는 작은 지시문을 발표했다.
https://github.com/Elijen/angular-popover-toggle
스코프 변수를 사용하여 팝오버를 표시하거나 숨길 수 있습니다.popover-toggle="variable"다음과 같이 지시합니다.
<span popover="Hello world!" popover-toggle="isOpen">
Popover here
</span>
다음은 데모 Plunkr입니다.
http://plnkr.co/edit/QeQqqEJAu1dCuDtSvomD?p=preview
나의 접근법:
- 모델의 팝오버 상태 추적
- 적절한 지시사항을 사용하여 요소별로 이 상태를 변경합니다.
DOM 조작을 디렉티브에 맡기는 것입니다.
더 잘 설명했으면 하는 바이올린을 조립해 보았습니다만, 당신이 말한 UI Bootstrap에서 훨씬 더 정교한 솔루션을 찾을 수 있을 것입니다.
마크업:
<div ng-repeat="element in elements" class="element">
<!-- Only want to show a popup if the element has an error and is being hovered -->
<div class="popover" ng-show="element.hovered && element.error" ng-style>Popover</div>
<div class="popoverable" ng-mouseEnter="popoverShow(element)" ng-mouseLeave="popoverHide(element)">
{{ element.name }}
</div>
</div>
JS:
function DemoCtrl($scope)
{
$scope.elements = [
{name: 'Element1 (Error)', error: true, hovered: false},
{name: 'Element2 (no error)', error: false, hovered: false},
{name: 'Element3 (Error)', error: true, hovered: false},
{name: 'Element4 (no error)', error: false, hovered: false},
{name: 'Element5 (Error)', error: true, hovered: false},
];
$scope.popoverShow = function(element)
{
element.hovered = true;
}
$scope.popoverHide = function(element)
{
element.hovered = false
}
}
0.13.4 릴리즈 이후, 여기 오는 다른 분들을 위해, NAT은 Popover를 프로그래밍 방식으로 열고 닫을 수 있는 기능을 추가했습니다.*-is-openAngular UI 부트스트랩 라이브러리의 툴팁과 팝오버 모두에 대한 특성입니다.따라서 자체 코드/솔루션을 롤링할 필요가 없습니다.
마이클 스트라멜의 대답에 따르면, 하지만 모든 각도가 있는JS 솔루션:
// define additional triggers on Tooltip and Popover
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'show': 'hide'
});
}])
다음 지시문을 추가합니다.
app.directive('ntTriggerIf', ['$timeout',
function ($timeout) {
/*
Intended use:
<div nt-trigger-if={ 'triggerName':{{someCodition === SomeValue}},'anotherTriggerName':{{someOtherCodition === someOtherValue}} } ></div>
*/
return {
restrict: 'A',
link: function (scope, element, attrs) {
attrs.$observe('ntTriggerIf', function (val) {
try {
var ob_options = JSON.parse(attrs.ntTriggerIf.split("'").join('"') || "");
}
catch (e) {
return
}
$timeout(function () {
for (var st_name in ob_options) {
var condition = ob_options[st_name];
if (condition) {
element.trigger(st_name);
}
}
})
})
}
}
}])
그 후 마크업:
<span tooltip-trigger="show" tooltip="Login or register here" nt-trigger-if="{'show':{{ (errorConidtion) }}, 'hide':{{ !(errorConidtion) }} }"></span>
언급URL : https://stackoverflow.com/questions/20939754/good-way-to-dynamically-open-close-a-popover-or-tooltip-using-angular-based
'programing' 카테고리의 다른 글
| Oracle의 듀얼 테이블이란 무엇입니까? (0) | 2023.03.10 |
|---|---|
| 오브젝트의 getter 함수를 Jest로 모킹/바꾸는 방법 (0) | 2023.03.10 |
| Wordpress 역할 사용자 지정 기능이 true로 설정되었지만 false를 반환합니다. (0) | 2023.03.10 |
| Next.js에서 "필요한 매개 변수(id)가 getStaticPaths에서 문자열로 제공되지 않았습니다" 오류가 발생했습니다. (0) | 2023.03.10 |
| WCF 서비스에서 클린 JSON을 반환하려면 어떻게 해야 하나요? (0) | 2023.03.10 |