Question

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

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()块中来明确地告诉AngularJS值已更新：

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

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

1 个答案: