Cibin William Cibin William - 1 month ago 13
AngularJS Question

Delay in Select/Deselect the image in Scroller

Problem Statement:

I am creating IOS App from Angularjs using ng-cordova plugin,For my project i am using horizontal scroller(like Swipe),Whenever i am trying to select/Deselect the images it's response is getting delay.I used $watch() to watch the changes for my $scope object.I am not able to identify where the problem is raising whether in my css either in my controller.Please any one can help me to clear the issue.

Markup:

<div class="wrapper no-copy">
<div class="internal" ng-repeat="pf in printlist"><img class="" ng-click="pf.selectFile = !pf.selectFile ;showCustom($event,pf)" ng-src="{{pf.imagePath}}"><div class="no-copy filedetail"><div style="color:black;margin-left:7px;" class=" no-copy internal font-filedetail">{{pf.filename.substring(0,8)}}..</br>Pages: {{pf.totalPages}}</br>{{pf.releaseCode}}</div><div class="internal filedetailbar"><img style="height:70px;" src="images/beacon/line_icon.png"></div></div>
</div>
</div>


CSS:

.wrapper {
width: 100%;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
padding: 1rem;
background-color: white;
// Toggle this depending upon whether you want to see the scrollbar
&::-webkit-scrollbar {
display: none;
}
}

.internal {
display: inline;
}


Controller:

$scope.showCustom = function (event, detail) {
console.log('detail')
console.log(detail)
/*$mdDialog.show({
locals: {name: detail},
clickOutsideToClose: true,
scope: $scope,
preserveScope: true,
templateUrl: 'ibprintProcessList/filedetail.html',
controller: function DialogController($scope, $mdDialog, name) {*/

$scope.del = detail;
console.log($scope.del.color)
console.log('*************')
console.log($scope.del)
if (!$scope.del.color) {
$scope.color = false
}
if ($scope.del.selectFile) {
$scope.filestatus = 'selected '
$scope.disabled = false
$scope.isFileSelect = $scope.isFileSelect + 1
$scope.selectfileextension = $scope.del.filename.split('.')
console.log('???????????????')
console.log($scope.selectfileextension[1])
if (($scope.selectfileextension[1] == 'pdf') || ($scope.selectfileextension[1] == 'rtf')) {
$scope.del.imagePath = "./images/beacon/pdf_icon_select.png"
}
else if (($scope.selectfileextension[1] == 'doc') || ($scope.selectfileextension[1] == 'docx')) {
$scope.del.imagePath = "./images/beacon/word_icon_select.png"
}
else if (($scope.selectfileextension[1] == 'xls') || ($scope.selectfileextension[1] == 'xlsx')) {
$scope.del.imagePath = "./images/beacon/xls_icon_select.png"
}
else if (($scope.selectfileextension[1] == 'ppt') || ($scope.selectfileextension[1] == 'pptx')) {
$scope.del.imagePath = "./images/beacon/pp_icon_select.png"
}
else if (($scope.selectfileextension[1] == 'png') || ($scope.selectfileextension[1] == 'jpg') || ($scope.selectfileextension[1] == 'jpeg') || ($scope.selectfileextension[1] == 'bmp') || ($scope.selectfileextension[1] == 'gif') || ($scope.selectfileextension[1] == 'tiff') || ($scope.selectfileextension[1] == 'tif')) {
$scope.del.imagePath = "./images/beacon/image_icon_select.png"
}
}
else {
$scope.disabled = true
$scope.isFileSelect = $scope.isFileSelect - 1
$scope.filestatus = 'unselected '
$scope.selectfileextension = $scope.del.filename.split('.')
if (($scope.selectfileextension[1] == 'pdf') || ($scope.selectfileextension[1] == 'rtf')) {
$scope.del.imagePath = "./images/beacon/pdf_icon.png"
}
else if (($scope.selectfileextension[1] == 'doc') || ($scope.selectfileextension[1] == 'docx')) {
$scope.del.imagePathh = "./images/beacon/word_icon.png"
}
else if (($scope.selectfileextension[1] == 'xls') || ($scope.selectfileextension[1] == 'xlsx')) {
$scope.del.imagePath = "./images/beacon/xls_icon.png"
}
else if (($scope.selectfileextension[1] == 'ppt') || ($scope.selectfileextension[1] == 'pptx')) {
$scope.del.imagePath = "./images/beacon/pp_icon.png"
}
else if(($scope.selectfileextension[1] == 'png') || ($scope.selectfileextension[1] == 'jpg') || ($scope.selectfileextension[1] == 'jpeg') || ($scope.selectfileextension[1] == 'bmp') || ($scope.selectfileextension[1] == 'gif') || ($scope.selectfileextension[1] == 'tiff') || ($scope.selectfileextension[1] == 'tif')){
$scope.del.imagePath = "./images/beacon/image_icon.png"
}
}

/*$scope.closeDialog = function () {
$mdDialog.hide();
//$scope.printNow()
}*/
$scope.del.$digest()
$scope.printlist.$digest()
console.log('Watch function starts')
// $scope.$watch($scope.del, $scope.showCustom);
$scope.$watchGroup(['$scope.del', '$scope.printlist'],$scope.showCustom,true)
console.log('Watch function ends')
}


When the user Select/Deselect the $scope.showCustom(event,pf) is triggered
pf object is passed to controller and assigned the pf object to $scope.del object

When the user Select/Deselect the $scope.del.imagepath holds the images and changed the image source

Referimage: Screen Shot

I tried both $watch() and $watchGroup() functions it's getting delay on Select/Deselect

Answer

Just use a simple horizontal scroller using overflow style,It will work as a SWIPE on your mobile app.

-webkit-overflow-scrolling: touch;
 &::-webkit-scrollbar {
    display: none;
  }

removed the above CSS ,beacause you are porting from web to mobile app. -webkit-overflow-scrolling is for browser. sometimes it may/maynot work while you converting your web app to mobile app.

Instead that add the below CSS:

overflow-y: hidden;
overflow-x: scroll;
width: 500px;         // you can change the width size depends on you
white-space: nowrap;