Is there a way to modify a scope variable using the on-scroll event in an Ionic app?

I am trying to update a variable's value when the scroll position exceeds 100 from the top, but for some reason it is not working as expected. The value of the variable does not change in $scope. Here is the code snippet:

 <div ng-show="title===true">
  <p>{{title}}</p>
  <p>{{card.nome}}</p>
  <p>{{card.prezzo}}€</p>
</div>

<ion-content style="top:0px" delegate-handle="cardScroll" on-scroll="getPositionScroll()">

$scope.title = true;
  $scope.getPositionScroll = function () {
    console.log("scrollPosition " + JSON.stringify($ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top));
    console.log("valore title " + $scope.title);
    console.log($ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top >= 100);
    $scope.title = $ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top >= 100;
  };

Can anyone help me figure out why this code is not functioning correctly?

Answer №1

It seems that the reason for this issue is because Angular does not automatically detect changes made by the getPositionScroll() function. Many Angular functions are enclosed in the $scope.$apply() function to notify Angular of any modifications. However, it appears that the scrolling tracking function is not wrapped within this function, requiring manual invocation.

To address this, insert the following line after $scope.title:

$scope.$apply($scope.title);

There have been numerous queries about the appropriate use of $scope.$apply(), such as the one found here. Overusing this method can adversely impact your application's performance. Additional insights can be obtained from the Angular documentation. For guidance on applying this function in scroll events, refer to this related question.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to reduce the height of the year dropdown list in the datepicker? It currently extends too far and takes up a lot of space in the viewport

I've been struggling with the height of a dropdown list for years. Despite my attempts to solve it with CSS, it seems to be more complicated than that. Online searches have not yielded the solution I need, and the documentation isn't providing th ...

Switching the cursor to an image when hovering over an element is causing inconsistency in hover events triggering

Currently, I am attempting to implement an effect that changes the cursor to an image when hovering over a text element and reverts back to the normal cursor upon leaving the text element. However, this functionality is not working as expected when using R ...

Generating an SQL query that produces interactive buttons that users can click with the goal of potentially altering the contents of a DIV element

I'm having some trouble explaining this, but here it goes.. My home.php file looks like this: <body> <div id='leftColumn'> <?php include ('includes/roomQuery.php') </div> ...

Updating padding through local storage does not function as intended

I recently added two buttons to my website for adjusting the padding. While they are functional, I find myself manually setting the padding for nav, main, and footer in the CSS. Here is the snippet of the code: main { padding: 20px 25%; } footer { ...

Resolving a persistent AngularJS 1 constant problem with Typescript

I'm currently developing an application using TypeScript and AngularJS 1, and I've encountered a problem while trying to create a constant and passing it to another class. The constant in question is as follows: module app{ export class A ...

Access Django template variables while using ng-repeat

My scenario involves a list of items, each accompanied by a checkbox. Users have the ability to select certain items and then perform a search for additional items by entering a query and clicking the "Search" button, triggering a POST request. It's c ...

Unable to retrieve dropdown value using JavaScript and display it in a div

javaScript code: Retrieving data from a dropdown and displaying it in the inner HTML of a div. function showcost() { var days = document.getElementById("Ddays"); var Dudays = days.options[days.selectedIndex].text; var div = docu ...

When you include ng-href in a button using AngularJS, it causes a shift in the alignment of the text within the button

Recently, I've been delving into Angularjs with angular-material and encountered a slight issue with ng-href. I created a Toolbar at the top of my webpage, but the moment I include the "ng-href" attribute to a button, the text inside the Button loses ...

Hide elements in hidden divs until the page is fully loaded to reduce initial page

www.prismasites.com I am creating a unique world map by using SVG DIVs shaped like Continents. Upon clicking on a continent on the world map, it conceals the world map DIV and displays the respective continent DIV with SVG. I have successfully achieved ...

Is it necessary to trigger a change event only for the specific ID that has been altered, even if there

I need a way to highlight the background of text inputs in green for 2 seconds when there is a successful AJAX request, but only for the specific input field that was changed. I'm struggling to figure this out using jQuery. For example, if I change t ...

Utilizing the scrollTop method to display the number of pixels scrolled on

My goal is to show the number of pixels a user has scrolled on my website using the scrollTop method in jQuery. I want this number of pixels to be displayed within a 'pixels' class. Therefore, I plan to have <p><span class="pixels"> ...

In Chrome browser, the orientation of the options in the datalist remains consistent

Is there a way to change the direction of the datalist's options to RTL? While I'm able to change the direction of the input element, the same doesn't apply to the options of the datalist. I've attempted setting the dir attribute to r ...

Using Angular: Linking an href tag with a JSON key

I am working with a JSON object that includes the following value: {test_link : www.test.com} My goal is to retrieve this value and use it as a link in an HTML <a> tag, like so: <a href={{test_link}}> test </a> However, I am encounter ...

Database insertion unsuccessful

Having trouble with this code. Here is the HTML form: <form method="post" action="invio_db1.php"> Name <input type="text" name="name"> <br><br; Surname <input name="surname" type="text"> <br><br> <inp ...

Displaying and concealing elements does not involve the use of animation

$scope.hideSampleList = function ($event) { if(animationApplied){ $($event.currentTarget).next().hide(300); } else { $($event.currentTarget).next().show(300); } } Currently, animation is only applied ...

Tips on handling a JSON string alert

Can someone guide me on how to extract a specific value from a JSON string I received in an alert message? The JSON string looks like this: {"Error":true, "data":["not available","somethinghere"]} The JSON string is obtained from an alert using the follow ...

"Enhance your website with a dynamic Jssor slider featuring nested slides and vertical

Exploring the idea of merging the nested slider feature with a vertical thumbnail display. Reviewing the source code for examples image-gallery-with-vertical-thumbnail.source.html and nested-slider.source.html, I am wondering how to effectively combine t ...

Is the CSS for the selected option not functioning properly in Internet Explorer version 10?

$('#inputTest').on('input', function() { $('#helloSellect option').css({ display: "none" }); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="inputTe ...

increased space between tables in HTML email design for optimal display in Gmail inbox

Here is the link to my code: http://jsfiddle.net/user1212/G86KE/4/ I am experiencing an issue in Gmail where there is extra white space between 2 tables inside the same cell. I have attempted using display:block; margin:0; padding:0; line-height:0; How ...

Having trouble setting background images for CSS ID, but it's working perfectly for CSS Body

When working with my .CSS file: Initially, applying the following styling: body { font-size: .85em; font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; color: #232323; background-color: #fff; background: url('Images/Login_Background.jpg'); ...