2013-11-14 7 views
15

मैं "Video For Everybody" जनरेटर का उपयोग करके अपने ऐप में एक मीडिया प्लेयर को एकीकृत कर रहा हूं। चूंकि प्लेयर एचटीएमएलऔर audio का समर्थन नहीं करता है तो प्लेयर फ्लैश करने के लिए फ़ॉलबैक दिखाता है, मुझे वीडियो और प्लेसहोल्डर (छवि) स्रोत के साथ param विशेषताओं के साथ object तत्व बनाना होगा।AngularJS: गैर मानक गुणों पर एनजी-src व्यवहार?

के रूप में की उम्मीद मैं भाव के शास्त्रीय समस्या समय में हल नहीं किया जा रहा में चलाने, अपने ब्राउज़र my.media.com/{{video.src}} लिए अनुरोध भेजता है बल्कि तो my.media.com/somevideo.mp4

दुर्भाग्य से वहाँ कई विशेषताएं (poster, flashvars, placeholder कुछ नाम हैं) जहां मैं एक ही का सामना कर रहे हैं मुसीबत। मैं ng-src या ng-href निर्देशों के समान व्यवहार बनाने के बारे में कैसे जाउंगा? मैंने प्रासंगिक स्रोत कोड की तलाश करने की कोशिश की, लेकिन मुझे यह नहीं मिला है। यहाँ एक टुकड़ा जो समस्याग्रस्त एचटीएमएल प्रदर्शित करता है,

<video controls="controls" poster="{{mediaModel.mediaFile2}}" width="300" height="150"> 
<source ng-src="{{mediaModel.mediaFile}}" type="{{mediaModel.contentType}}" /> 
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="300" height="150"> 
    <param name="movie" value="http://player.longtailvideo.com/player.swf" /> 
    <param name="allowFullScreen" value="true" /> 
    <param name="wmode" value="transparent" /> 
    <param name="flashVars" value="{{'controllerbar=over&amp;image=' + media.mediaFile2 + '&amp;file=' + mediaModel.mediaFile}}" /> 
    <img ng-src="{{mediaModel.mediaFile2}}" width="300" height="150" title="{{mediaModel.uploadedTime}}" /> 
</object> 

+0

क्या आप अपने कुछ दृष्टिकोण साझा कर सकते हैं जो काम नहीं कर रहे हैं? –

+0

इस बिंदु पर मैं अंधेरे में कम से कम ठोकर खा रहा हूं कि यह पता लगाने की कोशिश कर रहा है कि क्या कस्टम विशेषता लागू करना संभव है, इसलिए मुझे नहीं लगता कि इस समय मेरे पास मौजूद कोई भी कोड रचनात्मक होगा सवाल। जैसे ही मुझे लगता है कि मेरे पास कुछ है, मैं निश्चित रूप से अपडेट करूंगा। –

उत्तर

8

निर्माण में निर्देश का स्रोत ढूँढना आधिकारिक API दस्तावेज़ों पर आसान बना दिया है है। इस मामले में पृष्ठ के शीर्ष पर ngSrc के दस्तावेज़ पर जाएं, आपको दो बटन दिखाई देंगे, "इस दस्तावेज़ को बेहतर करें" और "स्रोत देखें" पर क्लिक करें, "स्रोत देखें" पर क्लिक करें और यह स्वचालित रूप से आपको सही स्रोत फ़ाइल पर ले जाएगा जहां निर्देश परिभाषित किया गया है। यह सभी अंतर्निहित निर्देशों में काम करता है, बहुत आसान!

नीचे मैं ngSrc के लिए कोड है, जो काफी दिलचस्प है सब पर जटिल नहीं लगती है चिपकाने रहा हूँ, महत्वपूर्ण लाइन priority: 99, टिप्पणी के आधार पर इसका मतलब है कि अगले करने के लिए है कि 99 की प्राथमिकता के साथ निर्देशों चलेंगे के बाद हो रहा है विशेषताओं को अलग किया गया है।

// ng-src, ng-srcset, ng-href are interpolated 
forEach(['src', 'srcset', 'href'], function(attrName) { 
    var normalized = directiveNormalize('ng-' + attrName); 
    ngAttributeAliasDirectives[normalized] = function() { 
    return { 
     priority: 99, // it needs to run after the attributes are interpolated 
     link: function(scope, element, attr) { 
     attr.$observe(normalized, function(value) { 
      if (!value) 
      return; 

      attr.$set(attrName, value); 

      // on IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist 
      // then calling element.setAttribute('src', 'foo') doesn't do anything, so we need 
      // to set the property as well to achieve the desired effect. 
      // we use attr[attrName] value since $set can sanitize the url. 
      if (msie) element.prop(attrName, attr[attrName]); 
     }); 
     } 
    }; 
    }; 
}); 

उपर्युक्त को देखते हुए यह आपके अपने निर्देश को लागू करने के लिए तुच्छ होना चाहिए।

+0

ग्रेट, बहुत बहुत धन्यवाद।विश्वास नहीं कर सकता कि मैंने कोणीय दस्तावेज़ों में इतना समय बिताया है और उस सरल, लेकिन बहुत व्यावहारिक सुविधा को अनदेखा किया है। बस एफवाईआई: अगर अधिक जवाब पॉप अप हो तो मैं थोड़ी देर के लिए बक्षीस को स्वीकार/पुरस्कृत करने पर रोक लगाऊंगा। –

+0

@KGChristensen एनपी खुश मैं मदद कर सकता था। – Beyers

1

तो सबसे सामान्य, रखरखाव योग्य, कॉन्फ़िगर करने योग्य और पुन: प्रयोज्य समाधान एक कस्टम निर्देश बनाना है जो आपके लिए इसे संभालेगा।

इस -->PLNKR<-- पर ध्यान दें, वस्तुतः आपको वहां की ज़रूरत है। आप इसे थोड़ा कमजोर करने के लिए है।

यह कैसे काम करता है: निर्देश के लिए आप कॉन्फ़िगरेशन ऑब्जेक्ट पास करते हैं (यदि आपको अधिक ऑब्जेक्ट्स की आवश्यकता है तो अतिरिक्त विशेषताओं को बनाएं)। तत्व दो राज्यों में हो सकता है: तैयार या नहीं। और $scope.isReady बस बताता है कि सभी सामग्री एकत्र की गई है। यदि ऐसा है तो ngSwitch वीडियो प्लेयर टेम्पलेट लोड करता है और चूंकि सभी जानकारी है कि कोई अवांछित अनुरोध नहीं भेजे जाते हैं।

+0

प्रयास के लिए धन्यवाद, हालांकि एक निश्चित टाइमआउट होने पर वास्तव में उपयोगकर्ता के अनुकूल या व्यवहार्य विकल्प नहीं है। मैं अभिव्यक्ति संकल्प के लिए देखने के लिए $ निरीक्षण का उपयोग करके ngSrc निर्देश का अपना कार्यान्वयन करने में कामयाब रहा। –

+0

@KGChristensen शायद आपको कोड समझ में नहीं आया। '$ टाइमआउट' का उपयोग करना यह दिखाने के लिए था कि यह दृष्टिकोण ** काम करता है ** और इसका उपयोग नियंत्रक में किया गया था, न कि निर्देश में। निर्देश दायरे के लिए दायरे के लिए इंतजार कर रहा है, जांचता है कि क्या सभी डेटा ठीक से सेट हैं और केवल टेम्पलेट लोड करने से ही। आप दायरे को कैसे पॉप्युलेट करते हैं ** पूरी तरह से अप्रासंगिक **: मैंने '$ टाइमआउट 'का उपयोग किया क्योंकि यह सबसे आसान था। यदि आपके पास पहले से मौजूद सभी प्रासंगिक जानकारी है जब नियंत्रक प्रारंभ किया गया है तो निर्देश भी काम करेगा। –

+0

आह, इसके बारे में खेद है - अब इसमें एक और नज़र थी, पिछली बार थोड़ा सा जल्दी था। हालांकि मैं देख सकता हूं कि यह दृष्टिकोण काम करता है, यह थोड़ा बोझिल लगता है: डेटा तैयार होने से पहले टेम्पलेट को शामिल नहीं करना निर्देश दृष्टिकोण की ताकत (विशेष रूप से एनजीएसआरसी दृष्टिकोण की तुलना में) की तरह महसूस नहीं करता है। –

47

अब आप ng-attr-poster का उपयोग कर सकते हैं, या अधिक सामान्यतः: ng-attr-whatever

+1

यह मेरे लिए काम करता है! धन्यवाद –

1

मैं video टैग पर poster विशेषता के साथ एक समान समस्या में भाग गया। यदि आप ng-cloak पर src तत्वों के तत्वों के लिए ng-cloak लागू करते हैं, तो क्लॉक हटा दिए जाने पर वे कुछ भी लोड करने की कोशिश नहीं करेंगे।

+0

अच्छा, अद्यतन के लिए धन्यवाद। –

संबंधित मुद्दे