简体   繁体   中英

Angular scope data not binding to view when updated, but is binding when initialized

I have an angular view that correctly binds to its corresponding data in the scope when data is added. When trying to remove or update this data, it is not binding to the view. Here are the functions that are being triggered:

the view is bound to two pieces of data: $scope.music_stream.currently_playing_track & $scope.music_stream.queued_tracks.

so initially when a user adds a video, this function is called and is correctly displayed in the view.

    /**
     * Create an object representing the data needed for the currently playing track
     * @param {Number} id
     * @param {String} thumbnail
     * @param {String} title
     * @param {String} added_by
     * @param {String} track_duration
     */
    $scope.createPlayingTrack = function(id, thumbnail, title, added_by, track_duration) {
        var currently_playing_track_object = {
            id : id,
            thumbnail : thumbnail,
            title : title,
            added_by : added_by,
            vote_value : 0,
            track_duration : '',
            elapsed_time : '0:00'
        };

        $scope.music_stream.currently_playing_track = currently_playing_track_object;
        $scope.play($scope.music_stream.currently_playing_track.id);

        currently_playing_track.track_duration = player.getDuration();
    }

later on when this video ends, this function is called

    /**
     * Triggered when the player reaches the end of a video
     */
    $scope.loadNextVideo = function() {
        if(!jQuery.isEmptyObject($scope.music_stream.queued_tracks[0])) { // if something is in the queue
            next_video = $scope.music_stream.queued_tracks.shift();
            $scope.createPlayingTrack(next_video.id, '/assets/album_cover1.jpg', next_video.title, 'ah', '3:00')
        }
    }

when you console.log($scope.music_stream.queued_tracks) after the shift(), [] is returned (which is what I want), but this is not carried over to the view.

The more confusing part... when createPlayingTrack() is called again, the data in $scope.music_stream.currently_playing_track is correct (and this function correctly binded data to the view during its first call) ... but the view is not being updated with this call.

PM 77-1 and TheSharpieOne caught my amateur mistake. $scope.$apply must be called to update data in the view.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM