내 현재의 ionic App에는 Telegram 에서 채팅 선택 형식으로 정확하게 선택하려는 상자가 있습니다 . 즉, 다음을 의미합니다.
1. 처음에는 ionic에서 OnHold 제스처로 선택 상자를 시작 합니다 . 이것은 올바르게 작동합니다 .
2. 그 후 각각을 클릭 하여 상자를 선택하거나 선택 취소하고 싶습니다. 작동하지 않습니다.
HTML
<ion-content>
<div class="box" select-box>box 1</div>
<div class="box" select-box>box 2</div>
<div class="box" select-box>box 3</div>
</ion-content>
JS
var app = angular.module('app', ['ionic']);
app.directive("selectBox", ["$ionicGesture", "$rootScope",
function($ionicGesture, $rootScope) {
return {
scope: {},
restrict: "A",
link: function(scope, elem, attrs) {
// onHold => start select box by `onHold` => working good
$ionicGesture.on('hold', function() {
elem.addClass("selected");
$rootScope.startSelect = true; // to enable select box by click
}, elem);
// after start select box in `onHold` gesture =>
// select box by click => not working
if ($rootScope.startSelect) {
elem.on("click", function() {
if (elem.hasClass('selected')) {
elem.removeClass("selected");
} else {
elem.addClass("selected");
}
});
}
} // link function
} // return
}
]); // directive
app.controller('MainCtrl', ["$scope", "$rootScope",
function($scope, $rootScope) {
$rootScope.startSelect = false;
}
]);
CSS
.box {
padding: 10px;
margin: 15px;
background: #FFF;
width: 200px;
margin: 15px auto;
}
.selected {
background: red;
color: #FFF;
}
이제 어떻게할까요? 미리 감사드립니다
AngularJS 문서에서 :
DOM을 수정하려는 지시문은 일반적으로 링크 옵션을 사용하여 DOM 리스너를 등록하고 DOM을 업데이트합니다. 템플릿이 복제 된 후 실행되며 지시문 논리가 배치됩니다.
따라서 link처음에 한 번만 실행됩니다. 그리고 이것을 확인하는 부분도 있습니다 : if ($rootScope.startSelect) {...}. 이 값이 true매번 실행되도록 다른 리스너 내부 에 있는지 확인해야합니다 . tap예를 들어 제스처 를 사용할 수 있습니다 .
$ionicGesture.on('tap', function() {
if ($rootScope.startSelect) {
if (elem.hasClass('selected')) {
elem.removeClass('selected');
} else {
elem.addClass('selected');
}
}
}, elem);
공지 사항 $rootScope.selected남아 true최초의 후 hold이벤트는, 그래서 너무 선택할 역할을합니다 테이핑. 이것이 당신이 찾고있는 기능인지 모르겠다.
다음은 귀하의 예제가 포함 된 업데이트 된 바이올린입니다. http://jsfiddle.net/browomk2/2/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다