AngularJS指令 - 而插值

我發現了AngularJS指令，我面臨的一個問題用於綁定的對象的屬性模板錯誤。AngularJS指令 - 而插值

我有不同的內容類型（JPG格式，MP4）的項目清單，我試圖通過img標籤和關於內容類型的視頻標籤之間切換自定義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 />

但我有錯誤消息：

錯誤：[$插值：noconcat]出錯插值：http://192.168.1.11:8100/api/events/video/ {{event._id}} 嚴格語境逃逸不允許時則需要信任值，用於連接多個表達式內插。

我已經嘗試過的屬性範圍添加到指令返回的對象，但後來我有一個未定義的對象...

謝謝您的幫助！

編輯：

我發現了這個問題涉及視頻的網址（這是針對XSS攻擊保護），但互聯網，我不知道我怎麼可以自定義我的DOM的這一部分，並避免任何安全缺乏..

來源

2017-03-24 Frédéric Lopes

可以使用$ SCE的服務來回報信任的資源。

在src提供從你的範圍函數會返回一個值得信賴的資源URL。

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

文檔：https://docs.angularjs.org/api/ng/service/ $ SCE

來源

2017-03-24 16:34:59

謝謝！只管理處理它。我取代從源標籤我的屬性SRC通過NG-SRC = {{resourceUrl}}，並直接在使用$ sce.trustAsResourceUrl（myURL）我的控制器建立我URL;方法。 –

AngularJS指令 - 而插值

回答

相關問題