0

AngularJS ディレクティブを発見しました。オブジェクトの属性をテンプレートにバインドする際の問題に直面しています。

さまざまなコンテンツ タイプ (jpg、mp4) のアイテムのリストがあり、コンテンツ タイプに関して img タグと video タグを切り替えて DOM をカスタマイズしようとしています。

前のビューから選択したオブジェクトを取得するための依存関係としてファクトリを使用するコントローラーがあります。

app.controller('EventDetailCtrl', function($scope, Events) {
   $scope.event = Events.getCurrentEvent();
}

それから、私は私の指令を持っています:

angular.module('starter.directives', [])
.directive('myEventDirective', ['$compile', 'API_ENDPOINT', function($compile, API_ENDPOINT){
  var imgTemplate = '<img ng-src="' + API_ENDPOINT.url + '/events/image/{{event._id}}" />';

  var videoTemplate = '<video controls="controls" preload="metadata" webkit-playsinline="webkit-playsinline" class="videoPlayer">' + 
    '<source src="' + API_ENDPOINT.url + '/events/video/{{event._id}}" type="video/mp4"/> </video>';

  var getTemplate = function(contentType){
    var template = '';
    if(contentType == 'mp4'){
       template = videoTemplate;
    } else { 
     template = imgTemplate; 
    }
    return template;
  };

  return {
    restrict: 'E',
    replace: true,
    link: function(scope, element, attrs){
      console.log(scope.event);
      element.html(getTemplate(scope.event.contentType));
      compile(element.contents())(scope);
    }
  }
}]);

私の console.log(scope.event) では、ブラウザーはオブジェクトをそのすべての属性 (_id、contentType、filename など) と共に出力しています。

そして、コンテンツ タイプに関するタグを更新したい HTML ビュー:

<ion-view view-title="{{event.name}}">
  <ion-content class="padding">
   <my-event-directive data-source="event"></my-event-directive>
   <ion-item>
     Information about event do write
   </ion-item>
<ion-view />

しかし、私はエラーメッセージを持っています:

エラー: [$interpolate:noconcat] 補間中のエラー: http://192.168.1.11:8100/api/events/video/ {{event._id}} 厳密なコンテキスト エスケープでは、信頼できる値が必要な場合に複数の式を連結する補間が許可されません.

属性スコープをディレクティブの戻りオブジェクトに追加しようとしましたが、未定義のオブジェクトがあります...

ご協力ありがとうございました！

編集：

インターネットで問題がビデオ URL にあることを発見しました (これは XSS 攻撃に対する保護です) が、DOM のこのセクションをカスタマイズしてセキュリティの欠如を回避する方法がわかりません..

4

1 に答える 1

1

$sce サービスを使用して、信頼できるリソースを返すことができます。

src で、信頼できるリソース URL を返すスコープからの関数を提供します。

$scope.getResourceURL() {
    return $sce.trustAs($sce.RESOURCE_URL, yourURLhere);
}

ドキュメント: https://docs.angularjs.org/api/ng/service/ $sce

于 2017-03-24T16:34:59.667 に答える