एंगुलरजेएस एकाधिक अभिव्यक्तियों को एक यूआरएल

Question

के साथ इंटरपोलेशन में सम्मिलित करना मुझे पता है कि यह लंबा है, लेकिन कृपया मेरे साथ भालू। समस्या को समझना आसान है, इसे पूरी तरह से समझाने के लिए बस कुछ लेखन लेता है।

अभी मैं यह त्रुटि

Error: [$interpolate:noconcat] Error while interpolating: 
Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required. 
See http://docs.angularjs.org/api/ng.$sce 

मैं दस्तावेज में सभी पठन किया है हो रही है, लेकिन मैं अभी भी मेरी समस्या के लिए एक समाधान नहीं मिल रहा।

मैं एक निजी ऑनलाइन स्रोत पर $ http.get का उपयोग कर रहा हूं जिसमें डेटा जेएसएस फ़ाइल के रूप में समान है (इसलिए मैं डेटा को संशोधित नहीं कर सकता)। डेटा इस तरह दिखता है:

... 
"items": [ 
    { 
    "kind": "youtube#searchResult", 
    "etag": "\"N5Eg36Gl054SUNiWWc-Su3t5O-k/A7os41NAa_66TUu-1I-VxH70Rp0\"", 
    "id": { 
     "kind": "youtube#video", 
     "videoID": "MEoSax3BEms" 
     }, 
    }, 
    { 
    "kind": "youtube#searchResult", 
    "etag": "\"N5Eg36Gl054SUNiWWc-Su3t5O-k/VsH9AmnQecyYBLJrl1g3dhewrQo\"", 
    "id": { 
     "kind": "youtube#video", 
     "videoID": "oUBqFlRjVXU" 
     }, 
    }, 
... 

मैं अपने HTML iframe कि यूट्यूब वीडियो एम्बेड करता है में प्रत्येक आइटम के VIDEOID अंतर्वेशन कोशिश कर रहा हूँ। मेरी controller.js फ़ाइल में, मैं के रूप में ऐसी

$http.get('privatesource').success(function(data) { 
    $scope.videoList = data.items; 
}); 

तो अब चर "$ scope.videoList" data.items को मैप किया है, जो एक बहुत है के बाद $ http.get वादा वस्तु सेट कर रहा हूं वीडियो तत्वों के। मेरी एचटीएमएल फाइल में, मैं

<ul class="videos"> 
    <li ng-repeat="video in videoList"> 
    <span>{{video.id.videoID}}</span> 
    </li> 
</ul> 

का उपयोग करके प्रत्येक वीडियो के वीडियो आईडी को पुनर्प्राप्त कर सकता है और यह सभी वीडियो आईडी की सूची देता है। लेकिन अगर मैं इन मानों को एक यूआरएल में जोड़ना चाहता हूं, जैसे https://youtube.com/embed/, यह काम नहीं करता है।

<div ng-repeat="video in videoList"> 
    <iframe id="ytplayer" type="text/html" width="640" height="360" 
    ng-src="https://www.youtube.com/embed/{{video.id.videoId}}" 
    frameborder="0" allowfullscreen></iframe> 
</div> 

वहाँ एक रास्ता है कि मैं प्राप्त कर सकते हैं VIDEOID यूट्यूब यूआरएल में अंतर्वेशित जा करने के लिए है? मैं इस प्रकार $ sceDelegateProvider का उपयोग करके श्वेतसूचीकरण की कोशिश की है लेकिन यह अभी भी काम नहीं करता है

$sceDelegateProvider.resourceUrlWhitelist([ 
    'self', 
    'https://www.youtube.com/**']); 

किसी भी मदद की सराहना की है। धन्यवाद!

Answer 1

1.2 के बाद से आप केवल एक अभिव्यक्ति * [src], * [ng-src] या क्रिया को बाध्य कर सकते हैं। आप इसके बारे में अधिक पढ़ सकते हैं here।

ऐसा करें:

नियंत्रक में:

$scope.getIframeSrc = function (videoId) { 
    return 'https://www.youtube.com/embed/' + videoId; 
}; 

HTML:

ng-src="{{getIframeSrc(video.id.videoId)}}" 

ध्यान दें कि आप अभी भी आप के रूप में यह श्वेतसूची में डालना होगा, या आप locked loading resource from url not allowed by $sceDelegate policy मिल जाएगा।

Answer 2

@ tasseKATT के जवाब के लिए एक वैकल्पिक (जो एक नियंत्रक समारोह की आवश्यकता नहीं है) एक फ़िल्टर एक्सप्रेशन में सीधे स्ट्रिंग संयोजन का उपयोग करने के लिए है:

angular.module('myApp') 
    .filter('youtubeEmbedUrl', function ($sce) { 
    return function(videoId) { 
     return $sce.trustAsResourceUrl('http://www.youtube.com/embed/' + videoId); 
    }; 
    }); 

<div ng-src="{{ video.id.videoId | youtubeEmbedUrl }}"></div> 

मैंने पाया यह विशेष रूप से एसवीजी आइकन स्प्राइट्स का उपयोग करते समय उपयोगी, जिसके लिए आपको एसवीजी use टैग पर xlink:href विशेषता का उपयोग करने की आवश्यकता है - यह एक ही एससीई नियमों के अधीन है। कंट्रोलर फ़ंक्शन को दोहराना हर जगह मुझे स्प्राइट का उपयोग करने की आवश्यकता होती है, मूर्खतापूर्ण लगती थी इसलिए मैंने फ़िल्टर विधि का उपयोग किया।

angular.module('myApp') 
    .filter('svgIconCardHref', function ($sce) { 
    return function(iconCardId) { 
     return $sce.trustAsResourceUrl('#s-icon-card-' + iconCardId); 
    }; 
    }); 

<svg><use xlink:href="{{ type.key | svgIconCardHref }}"></use></svg> 

नोट: मैं पहले अभिव्यक्ति के अंदर सिर्फ सरल स्ट्रिंग संयोजन की कोशिश की थी। हालांकि इससे कुछ अप्रत्याशित व्यवहार हुए, जहां ब्राउज़र को अभिव्यक्ति की व्याख्या करने से पहले एंगुलर को इसका विश्लेषण करने का मौका मिला और असली href के साथ प्रतिस्थापित किया गया। चूंकि ng-srcuse टैग के xlink:href के बराबर नहीं है, इसलिए मैंने फ़िल्टर को चुना है, जो इस मुद्दे को हल करता है।

Answer 3

नियंत्रक में

:

app.filter('trustAsResourceUrl', ['$sce', function ($sce) { 
    return function (val) { 
     return $sce.trustAsResourceUrl(val); 
    }; 
}]); 

html में:

ng-src="('https://www.youtube.com/embed/' + video.id.videoId) | trustAsResourceUrl" 

Answer 4

मेरे संस्करण angular.min.1.5.8.js मैं एक फार्म के साथ एक ही मुद्दा था। मैंने ng-action = URL द्वारा विशेषता क्रिया = URL को बदलकर इसे हल किया।