ऑडियो टैग, एंगुलर

Question

से इसे कैसे संभाला जाए, मैं एचटीएमएल 5 ऑडियो टैग का उपयोग कर रहा हूं, लेकिन मैं इसे दिशा-निर्देशों के अनुसार एंगुलर से नियंत्रित करना चाहता हूं, मुझे नियंत्रकों से डीओएम को छूना नहीं है इसलिए मुझे बनाना है एक निर्देश

चलो कहते हैं कि मैं इस 2 बटन

<button onclick="playMusic()" type="button">Play Music</button> 
<button onclick="pauseMusic()" type="button">Pause Music</button> 

और इस जे एस हिस्सा

var music = document.getElementById("myMusic"); 

function playMusic() { 
    music.play(); 
} 

function pauseMusic() { 
    music.pause(); 
} 

में है, लेकिन मैं प्रतिलेख के कि कोणीय में की जरूरत है, इसलिए, मैं उस के लिए एक निर्देश कैसे बना सकते हैं ? या होय मैं इसे नियंत्रक में कार्यान्वित कर सकता हूं?

Answer 1

कोणीय में, किसी भी डीओएम हेरफेर को वास्तव में directive में संभाला जाना चाहिए (documentation देखें)। यह चिंताओं को अलग करना और अन्य कोणीय कलाकारों की टेस्टेबिलिटी में सुधार करना है जैसे controllers और services।

app.directive('myAudio', function() { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attr) { 
      var player = element.children('.player')[0]; 
      element.children('.play').on('click', function() { 
       player.play(); 
      }); 
      element.children('.pause').on('click', function() { 
       player.pause(); 
      }); 
     } 
    }; 
}); 

और जुड़े एचटीएमएल:

<my-audio> 
    <audio> 
     <source src="demo-audio.ogg" /> 
     <source src="demo-audio.mp3" /> 
    </audio> 
    <button class="play">Play Music</button> 
    <button class="pause">Pause Music</button> 
</my-audio> 

Answer 2

आप इसे नियंत्रक में कार्यान्वित कर सकते हैं, लेकिन आपको वहां अपने डोम मैनिपुलेशन करने की आवश्यकता होगी ... जो वास्तव में आप से बचने की कोशिश कर रहे हैं।

https://docs.angularjs.org/guide/directive

http://ng-learn.org/2014/01/Dom-Manipulations/

कुछ प्रासंगिक कोड है, जो उपयोगी हो सकता है, जबकि आप पिछले एक पढ़ा के लिए बाहर देखने के लिए:

element = angular.element('<div class="form" data-my-slide="showForm">Text</div>'); 

और यहाँ ...

link: function(scope, element, attrs) { 

     // We dont want to abuse on watch but here it is critical to determine if the parameter has changed. 
     scope.$watch(attrs.mySlide, function(newValue, oldValue) { 

     // This is our logic. If parameter is true slideDown otherwise slideUp. 

आशा है कि मदद करता है!