AngularJS multiple Ausdrücke verketten in Interpolation mit einer URL

Question

Ich weiß, das ist lang, aber bitte ertragen mit mir. Das Problem ist leicht zu verstehen, braucht nur etwas zu schreiben, um es vollständig zu erklären.

Im Moment bin ich immer diese Fehlermeldung

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 

ich die ganze Lesung in der Dokumentation gemacht habe, aber ich kann immer noch nicht eine Lösung für mein Problem finden.

Ich verwende $ http.get auf einer privaten Online-Quelle, die Daten hat, die der Form einer JSON-Datei ähnelt (so kann ich die Daten nicht ändern). Die Daten sieht wie folgt aus:

... 
"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" 
     }, 
    }, 
... 

Ich versuche, die videoId der einzelnen Elemente in meine HTML iframe zu interpolieren, die die YouTube-Video einbettet. In meiner controller.js Datei, habe die Einrichtung ich das Versprechen Objekt nach dem $ http.get als solche

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

So, jetzt die Variable „$ scope.videoList“ auf data.items abgebildet wird, die viel haben von Videoelementen. In meiner HTML-Datei kann ich die videoID jedes Videos mit

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

abrufen, und das listet alle videoIDs auf. Aber wenn ich versuche, diese Werte zu einer URL zu verketten, wie https://youtube.com/embed/, funktioniert es nicht.

Gibt es eine Möglichkeit, die VideoID in die Youtube URL interpolieren zu lassen Ich habe versucht, durch Whitelisting die $ sceDelegateProvider wie folgt verwendet, aber es funktioniert immer noch nicht

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

Jede Hilfe sehr geschätzt wird. Vielen Dank!

Answer 1

Seit 1.2 können Sie nur einen Ausdruck an * [src], * [ng-src] oder action binden. Sie können mehr darüber lesen here.

Versuchen Sie stattdessen:

In Controller:

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

HTML:

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

Beachten Sie, dass Sie noch brauchen sie die weiße Liste, wie Sie haben, oder Sie werden locked loading resource from url not allowed by $sceDelegate policy erhalten.

Answer 2

Eine Alternative zu @ tasseKATT Antwort (die keine Controller Funktion nicht erforderlich ist) ist String-Verkettung direkt im Ausdruck einen Filter zu verwenden:

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> 

ich gefunden habe, dies vor allem nützlich, wenn Sie SVG-Symbol-Sprites verwenden, für die Sie das Attribut xlink:href auf dem SVG-Tag use verwenden müssen - dies unterliegt den gleichen SCE-Regeln. Das Wiederholen der Controller-Funktion überall, wo ich ein Sprite verwenden musste, erschien uns albern, also benutzte ich stattdessen die Filtermethode.

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> 

Hinweis: Ich hatte vorher versucht, nur einfache String-Verkettung innerhalb des Ausdrucks. Dies führte jedoch zu einem unerwarteten Verhalten, bei dem der Browser den Ausdruck interpretierte, bevor Angular eine Chance hatte, ihn zu analysieren und durch den echten href zu ersetzen. Da es für die usexlink:hrefng-src Entsprechung nicht gibt, entschied ich mich für den Filter, der das Problem zu lösen scheint.

Answer 3

in Controller:

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

in html:

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

Answer 4

Meine Version ist angular.min.1.5.8.js ich mit einer Form das gleiche Problem hatte. Ich habe es gelöst, indem ich das Attribut action = URL durch ng-action = URL geändert habe.