javascript - $scope 变量拒绝在 wavesurfer 的函数处理程序中更改值

Question

大家好，下面是我的代码示例，我试图让 $scope.icon 在 wavesurfer 的函数处理程序中更新为新值，但它似乎对我不起作用，无论我做什么做。有人对此有想法吗？

msp.controller('Controller2', function($scope, $http, $rootScope) {
    $scope.message_id = $rootScope.message_id;
    $scope.message_title = $rootScope.message_title;  
    $scope.message_date = $rootScope.message_date;
    $scope.message_audio = $rootScope.message_audio;
    $scope.message_image = $rootScope.message_image;
    $scope.icon = "fa fa-spinner fa-spin";
    var id = $scope.message_audio;
    var wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: '#fff',
        progressColor: 'red',
        hideScrollbar: true,
        height: 100
    });
    $http({
        method: 'GET',
        url: 'http://customurl/app/messages.php',
        params: {id: id}
    }).then(function success(response) {
        $scope.message_audio = response.data;
        wavesurfer.load($scope.message_audio);
        wavesurfer.on('ready', function() {
            $scope.icon = "ti-control-skip-forward";
        })
    }, function error(response) {
        $scope.message_audio = response.data;
    });
    $scope.fn_play = function() {
        wavesurfer.playPause();
    }
});

Answer 1

尝试通过将值包装在 $scope.$apply() block 中来明确告诉 AngularJS 该值已更新，如下所示:

wavesurfer.on('ready', function() {
    $scope.$apply(function() {
        $scope.icon = "ti-control-skip-forward";
    }
})