Question

我不确定我做的是允许的还是可能的，但基本上我有一个使用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，而且我对此很新。

Answer 1

终于找到了问题。

可以找到答案来源here。

根据他（Calendee）的说法，应始终遵守点符号和原型继承。

所以我将我的观点更新为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);           
    });
}

可以找到其他参考资料here。

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

1 个答案: