AngularJS is not displaying the interface changes as expected

Question

AngularJS is not displaying the interface changes as expected

I have a list that is unordered, and whenever I click on a ListItem, it triggers the setActive() function.

<li ng-repeat="slide in data" ng-click="setActive(slide.slideIndex)">
  <span class="listItemText">
    <b>{{slide.slideIndex + 1}}. </b>{{slide.Title}}
  </span>
</li>

The setActive() function looks like this:

$scope.setActive = function(id)
{
    $scope.currentIndex = id;
}

Clicking on the List Items updates an image:

<img id="slide" ng-src="resources/slides/slide{{currentIndex + 1}}.jpg" />

Everything with that is working smoothly.

However, the issue arises with a video player where I need to update $scope.currentIndex at specific times.

I attempted the following approach:

player.addEventListener("timeupdate", function()
{
    currentTime = player.currentTime;
    angular.forEach($scope.data, function(value, key)
    {
        if (currentTime >= $scope.data[key].time && currentTime <= $scope.data[key].time + 0.3 && $scope.currentIndex != key)
        {
            console.log("load id:" + key);
            $scope.setActive(key); //Using the same function as for List Items
        }
    });
});

The console.log is functioning properly and logging at the cue points. However, the image does not update until I MouseOver the list. It then updates according to the current $scope.currentIndex. I am stuck on this issue. Any suggestions?

javascript angularjs

Answer 1

Answer №1

When updating your model outside of Angular's normal execution flow, it's important to use scope.$apply() to ensure that Angular recognizes the need to run $digest and potentially update the view. You can learn more about $apply here.

In essence, wrapping your call to setActive in $apply signals to Angular that a view update is required. Here's an example of how to achieve this:

player.addEventListener("timeupdate", function()
{
    currentTime = player.currentTime;
    angular.forEach($scope.data, function(value, key)
    {
        if (currentTime >= $scope.data[key].time && currentTime <= $scope.data[key].time + 0.3 && $scope.currentIndex != key)
        {
            console.log("load id:" + key);

            // Utilize $apply to trigger $digest
            $scope.$apply(function() {
                $scope.setActive(key);
            });
        }
    });
});

Answer 2

When updating your model outside of Angular's normal execution flow, it's important to use scope.$apply() to ensure that Angular recognizes the need to run $digest and potentially update the view. You can learn more about $apply here.

In essence, wrapping your call to setActive in $apply signals to Angular that a view update is required. Here's an example of how to achieve this:

player.addEventListener("timeupdate", function()
{
    currentTime = player.currentTime;
    angular.forEach($scope.data, function(value, key)
    {
        if (currentTime >= $scope.data[key].time && currentTime <= $scope.data[key].time + 0.3 && $scope.currentIndex != key)
        {
            console.log("load id:" + key);

            // Utilize $apply to trigger $digest
            $scope.$apply(function() {
                $scope.setActive(key);
            });
        }
    });
});

AngularJS is not displaying the interface changes as expected

Answer №1

Similar questions

What is the process for inserting text into a Word document using the Google Docs API?

Struggling to extract text from within a <p> tag on an Ionic 1 app page on iOS

What is the best way to implement the addMore event in my custom slot components when working with Vue Formulate?

Tips for assisting flow with managing the initialization of react component state

Executing a curl POST request within an npm script

Sending Data Back to Main Function Using a Callback

Save this page for later by using JavaScript to create a

Is it possible to redirect any web traffic using an authentication script?

Spinning image on button click with seamless animation in Javascript

Alter Text Using Typewriter

Prevent redundancy in fetching email and phone number through $http.get request

Having trouble with nested requests and appending using Jquery or JavaScript?

Expanding the Number of Arguments Sent to a Callback Function

Select: Exchange icon when clicked

Add a new row to the table when a dropdown option is selected, and remove the row when deleted. Ensure that the row is only added

Is the × symbol added from JavaScript not able to be clicked on?

React App anchor tag's external links fail to function properly on subsequent clicks when accessed through mobile devices

AngularJS validation for minimum character count prevents character overflow

Sending documents to a printer directly from a Rails application

Project in Three.js where the camera remains focused on the object while in a top-down perspective