Angular JS dynamic ng-src在1.2.0-rc.2中不起作用
我正在尝试在angular JS应用程序中实现一个video元素，但ng-src不会读取范围变量
我使用的是1.2.0-rc.2
<!DOCTYPE html>
<html ng-app="ngView">
<head>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>
var app = angular.module('ngView', []);
function MyControl($scope){
$scope.file = '1234.mp4';
}
</script>
</head>
<body ng-controller="MyControl">
<video controls ng-src="http://www.thebigdot.com/{{file}}"></video>
</body>
</html>如果我使用一个更老版本的AngularJS库，它可以工作。
cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js (works)这是最新版本中的一个错误，还是被故意禁用了？周围的工作是什么？
回答 5
Stack Overflow用户
发布于 2013-10-15 12:28:20
经过一些调试后，我发现错误是这样的：
Error: [$interpolate:noconcat] Error while interpolating: http://www.thebigdot.com/{{file}} Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required. See http://docs.angularjs.org/api/ng.$sce
at $interpolate (http://code.angularjs.org/1.2.0-rc.2/angular.js:6953:17) at attrInterpolateLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:5367:27) at nodeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:5121:13) at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4640:15) at nodeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:5115:24) at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4640:15) at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4643:13) at publicLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4549:30) at http://code.angularjs.org/1.2.0-rc.2/angular.js:1157:27 angular.js:7861的at $interpolate (http://code.angularjs.org/1.2.0-rc.2/angular.js:6953:17) at attrInterpolateLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:5367:27) at nodeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:5121:13) at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4640:15) at nodeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:5115:24) at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4640:15) at compositeLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4643:13) at publicLinkFn (http://code.angularjs.org/1.2.0-rc.2/angular.js:4549:30) at http://errors.angularjs.org/1.2.0-rc.2/$interpolate/noconcat?p0=http%3A%2F%2Fwww.thebigdot.com%2F%7B%7Bfile%7D%7D at
本文解释了发生了什么以及如何禁用严格的上下文转义：http://docs.angularjs.org/api/ng.$sce
Stack Overflow用户
发布于 2013-10-15 13:06:58
Angular 1.2默认情况下启用了严格上下文转义(SCE)。您需要稍微调整代码以使其正常工作。
HTML
更改标记，使ng-src绑定到一个变量，而不是您之前设置的URL +变量：
<video controls ng-src="{{videoUrl}}"></video>JavaScript
添加$sce以注入SCE提供程序，并使用$sce.trustAsResourceUrl方法设置videoUrl。
function MyControl($scope, $sce) {
var videoUrl = 'http://www.thebigdot.com/1234.mp4';
$scope.videoUrl = $sce.trustAsResourceUrl(videoUrl);
}以下是此设置的实际JS Bin demo。
Stack Overflow用户
发布于 2014-10-04 22:10:52
我构建了这个指令
app.directive('loadAudio', function($parse) {
return {
restrict: 'EA',
scope: {
source: '=',
},
template: '<audio />',
link: function(scope, iElement, iAttrs) {
scope.$watch('source', function(value) {
var audio = iElement.find('audio');
audio.attr('src', value);
}, true);
}
}
});接下来是我在模板上写的内容
<load-audio source="your_src" ></load-audio>https://stackoverflow.com/questions/19372300
复制相似问题
腾讯云开发者
