Saturday, 15 May 2010

ng-model for html5 audio element in AngularJS -


How to tie the audio element to an NG-model but any thoughts?

To update a div with the value of playback of the audio element I like?

  & lt; Audio ng-model = "myAudio" & gt; ... & lt; / Audio & gt; & Lt; Div & gt; {{MyAudio.timeElapsed}} & lt; / Div & gt;   

Or how to do any such idea?

You can do this by creating a custom command for your app. The instruction adds the function to the timeupdate event of your audio element. The bound function updates time, the expiry of the current scope of the property and the call apply to the promotion of changes in $ view. You can see an example on this:

HTML
  & lt; Body ng-app = "audio" ng-controller = "testAudioCtrl" & gt; & Lt; Audio control my-audio & gt; & Lt; Source src = "** your source file **" & gt; & Lt; / Source & gt; & Lt; / Audio & gt; & Lt; Div & gt; Elapsed: {{timeElapsed}} & lt; / Div & gt; & Lt; / Body & gt;   

javascript
  angular Module ("audio", []). Directive ("myAudio", function () {Return function (Scope, element, ethers) {element.bind ("timeupdate", function () {scope.timeElapsed = element [0]. Current time; Scope. $ Apply () ;});}}); TestAudioCtrl = function ($ scope) {$ scope.timeElapsed = 0; }    

No comments:

Post a Comment