URL과 보간으로 연결되는 AngularJS 여러 표현식

URL과 보간으로 연결되는 AngularJS 여러 표현식

긴 건 알지만 조금만 참아주세요.이 문제는 이해하기 쉬우므로 충분히 설명하려면 약간의 글쓰기가 필요합니다.

지금 이 에러가 발생하고 있습니다.

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를 사용하고 있습니다.json 파일 형식과 유사한 데이터를 가진 개인 온라인 소스에 접속합니다(데이터를 수정할 수 없습니다).데이터는 다음과 같습니다.

...
"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 뒤에 약속 객체를 설정합니다.그렇게 되다

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

변수 "$scope"는 다음과 같습니다.videoList"는 많은 비디오 요소가 있는 data.items에 매핑됩니다.HTML 파일에서 비디오를 검색할 수 있습니다.를 사용한 각 비디오의 ID

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

여기 모든 비디오가 표시됩니다.ID입니다만, 이러한 값을 https://youtube.com/embed/, 와 같은 URL 에 연결하려고 해도 동작하지 않습니다.

<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>

이 비디오는 어떻게 얻을 수 있을까요?Youtube URL에 삽입되는 ID? $sceDelegateProvider를 사용하여 화이트리스트에 추가하려고 했지만 아직 작동하지 않습니다.

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

어떤 도움이라도 감사합니다.감사합니다!

@tasseKA 대체 수단TT의 답변(컨트롤러 기능이 필요 없음)은 식에서 직접 문자열 연결 필터:

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>

SVG 아이콘 스프라이트를 사용할 때 특히 유용하다는 것을 알게 되었습니다. 즉,xlink:hrefSVG의 속성usetag - 이는 동일한 SCE 규칙에 따릅니다.스프라이트를 사용해야 할 곳마다 컨트롤러 기능을 반복하는 것이 바보 같아 필터 방식을 대신 사용했습니다.

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>

주의: 이전에 식 안에서 간단한 문자열 연결만 시도했습니다.그러나 이것은 Angular가 식을 해석하고 실제와 바꿀 기회를 갖기 전에 브라우저가 식을 해석하는 예기치 않은 동작으로 이어졌다.href없기 때문에ng-src에 상당하는use태그의xlink:href필터를 선택했기 때문에 문제가 해결된 것 같습니다.

1.2이므로 *[src], *[ng-src] 또는 액션에 바인딩할 수 있는 표현은 1개뿐입니다.자세한 내용은 여기를 참조하십시오.

대신 다음을 시도해 보십시오.

컨트롤러 내:

$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.

컨트롤러 내:

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"

은 ★★★★★★★입니다.angular.min.1.5.8.js양식에도 같은 문제가 있었습니다.action속성성========= by ng-action에의의URL=을 했습니다.URL 니 url 。

이 . 왜냐하면 이 기능은 사용하실 수 없기 때문입니다.ng-action진짜 지시가 아닙니다.

언급URL : https://stackoverflow.com/questions/23405162/angularjs-multiple-expressions-concatenating-in-interpolation-with-a-url