$scope 变量拒绝更改 wavesurfer 函数处理程序中的值答案

【问题标题】：$scope variable refuses to change value within wavesurfer's function handler$scope 变量拒绝更改 wavesurfer 函数处理程序中的值
【发布时间】：2019-05-22 10:30:59
【问题描述】：

大家好，下面是我的代码示例，我正在尝试让 $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();
    }
});

【问题讨论】：

标签： javascript angularjs variables scope

【解决方案1】：

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

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

【讨论】：

这简直太棒了。它完美地工作。我什至不能开始感谢你足够的 Lex。我很感激。