AngularJS$apply在输入类型范围的ngChange之后不起作用

AngularJS $apply not working after ngChange on input type range

本文关键字：ngChange 之后 不起作用 范围 类型 apply 输入 AngularJS      更新时间：2023-09-26

我不确定我所做的是允许还是可能，但基本上我有一个使用html5音频元素的简单音频播放器。

app.factory('audio', function($document) {
    var audio = $document[0].createElement('audio');
    return audio;
});

然后在我看来，我有一个寻找的范围输入

<input id="seek" type="range" min="0" ng-model="seek" ng-change="seeked()" max="{{max}}" value="{{seek}}">

在我的控制器上，我有以下内容：

app.controller('PlayerController', function($rootScope, $scope, audio) {
    //triggered by ngChange to update audio.currentTime
    $scope.seeked = function(){
        audio.currentTime = this.seek;
    };
    $scope.updateUI = function(seek, max){        
        $scope.max = max;
        $scope.seek = seek;
    };
    audio.addEventListener('timeupdate', function(){
        seek = audio.currentTime;
        max = audio.duration;          
        $rootScope.$apply($scope.updateUI(seek, max));           
    });
}

我的问题是，当我玩游戏时，范围输入元素正在更新，这正是我想要的。但当我更改输入值（移动滑块/搜索）时，歌曲会准确地跳到我放置滑块的位置，但滑块在之后不再更新。

我为此做的另一种方法是使用jqLite并用以下内容更新"timeupdate"事件内的输入范围值：

angular.element('#seek').val(audio.currentTime);

这很好，但我想尽可能避免使用jqLite，除非没有其他解决方法。有人能告诉我这件事吗？顺便说一句，我正在使用Ionic Framework，我对此还很陌生。

终于找到了问题。

答案的来源可以在这里找到。

根据他（卡伦德）的说法，点记法和原型继承应该始终遵守。

所以我把我的观点更新到了ff:

<input type="range" min="0" ng-model="data.seek" ng-change="seeked();" max="{{max}}" value="{{data.seek}}">

然后在我的控制器上：

app.controller('PlayerController', function($timeout, $scope, audio) {
    //init vars
    $scope.data = {};
    //triggered by ngChange to update audio.currentTime
    $scope.seeked = function(){
        audio.currentTime = this.data.seek;
    };
    $scope.updateUI = function(seek, max){        
        $scope.max = max;
        $scope.data.seek = seek;
    };
    audio.addEventListener('timeupdate', function(){
        seek = audio.currentTime;
        max = audio.duration;
        //did a little change here by using $timeout         
        $timeout(function(){
            $scope.updateUI(seek, max)
        }, 0);           
    });
}

其他参考资料可以在这里找到。

相关文章：