AngularJS $應用ngChange後輸入類型範圍不適用

我不知道我在做什麼是允許或可能的但基本上我有一個簡單的音頻播放器使用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，而且我對此很新。

來源

2014-10-02 Bryan CS

您是否嘗試過在更改currentTime之後調用了seeked函數中的$ apply？ – 2014-10-02 19:37:26

@JaredReeves，你的意思是在seeked（）中再次調用$ apply？ – 2014-10-02 19:41:07

是的，其他應用可能會在找到該值之前運行。我不確定這是否會起作用，這只是一個建議。 – 2014-10-02 19:43:37

終於找到了問題。

問題的答案可以找到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。

來源

2014-10-03 00:56:33

AngularJS $應用ngChange後輸入類型範圍不適用

回答

相關問題