【问题标题】:Angular scope data not binding to view when updated, but is binding when initialized角度范围数据在更新时未绑定到视图,但在初始化时绑定
【发布时间】:2014-11-16 23:35:41
【问题描述】:

我有一个角度视图,可以在添加数据时正确绑定到范围内的相应数据。尝试删除或更新此数据时,它不会绑定到视图。以下是正在触发的函数:

视图绑定到两条数据:$scope.music_stream.currently_playing_track 和 $scope.music_stream.queued_tracks。

所以最初当用户添加视频时,会调用此函数并正确显示在视图中。

    /**
     * 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();
    }

稍后当这个视频结束时,这个函数被调用

    /**
     * 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')
        }
    }

当您在 shift() 之后 console.log($scope.music_stream.queued_tracks) 时,会返回 [](这是我想要的),但这不会转移到视图中。

更令人困惑的部分...当再次调用 createPlayingTrack() 时,$scope.music_stream.currently_playing_track 中的数据是正确的(并且此函数在第一次调用期间正确地将数据绑定到视图)...但是视图此调用未更新。

【问题讨论】:

  • 我相信this answer 也适用于您的情况。另请参阅 AngularJS and scope.$apply 了解有关更新绑定的更多信息。
  • 你试过$scope.$apply()吗?
  • 不知道我需要在控制器本身中使用 $scope.apply()。立即查看!
  • 是的,成功了,谢谢大家!我将这些作为答案发布,并在允许时将其标记为正确。

标签: javascript angularjs data-binding scope


【解决方案1】:

PM 77-1 和 TheSharpieOne 发现了我的业余错误。必须调用 $scope.$apply 来更新视图中的数据。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-28
    • 1970-01-01
    • 2015-12-01
    • 2015-12-31
    • 2020-02-06
    • 2018-04-17
    相关资源
    最近更新 更多