Javascript AngularJS指令-插值时出错
我发现了AngularJS指令,并且面临着将对象的属性绑定到模板的问题 我有一个不同内容类型jpg、mp4的项目列表,我正试图通过在img标记和视频标记之间切换内容类型来定制DOM 我有一个控制器,它使用工厂作为从上一个视图获取选定对象的依赖项:Javascript AngularJS指令-插值时出错,javascript,angularjs,data-binding,angularjs-directive,angularjs-interpolate,Javascript,Angularjs,Data Binding,Angularjs Directive,Angularjs Interpolate,我发现了AngularJS指令,并且面临着将对象的属性绑定到模板的问题 我有一个不同内容类型jpg、mp4的项目列表,我正试图通过在img标记和视频标记之间切换内容类型来定制DOM 我有一个控制器,它使用工厂作为从上一个视图获取选定对象的依赖项: app.controller('EventDetailCtrl', function($scope, Events) { $scope.event = Events.getCurrentEvent(); } 那么,我有我的指示: angular
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);
}
}
}]);
在my console.logscope.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]插值时出错:{{event.\u id}
严格上下文转义不允许在需要可信值时连接多个表达式的插值
我已经尝试将属性作用域添加到指令的返回对象,但是我有一个未定义的对象
谢谢你的帮助
编辑:
我在互联网上发现问题来自视频URL,这是一种防止XSS攻击的保护,但我不知道如何自定义我的DOM的这一部分并避免任何安全缺陷。您可以使用$sce服务返回受信任的资源 在src中,从您的作用域中提供一个函数,该函数将返回一个受信任的资源URL
$scope.getResourceURL() {
return $sce.trustAs($sce.RESOURCE_URL, yourURLhere);
}
文档:$sce谢谢!只要设法处理它。我将源标记中的属性src替换为ng src={{resourceUrl}},并使用$sce.trustAsResourceUrlmyURL在控制器中直接构建我的URL;方法