新手上路，请多包涵

我正在尝试在角度 JS 应用程序中实现视频元素，而 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)

这是最新版本中的错误还是故意禁用的？解决方法是什么？

原文由 Ajq 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript angularjs

阅读 410

2 个回答

得票最新

社区维基

发布于
2022-12-12

✓ 已被采纳

经过一些调试，我发现错误是这样的：

 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][1]

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://code.angularjs.org/1.2.0-rc.2/angular.js:78:12
    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 <video controls="" ng-src="http://www.thebigdot.com/{{file}}"> angular.js:7861

本文解释了发生了什么以及如何禁用严格上下文转义： http://docs.angularjs.org/api/ng.$sce

原文由 akonsu 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-12-12

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 演示。

原文由 Ahmad Mageed 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Angular JS 动态 ng-src 在 1.2.0-rc.2 中不起作用

HTML

JavaScript

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

什么是闭包？闭包有哪些应用场景？

element-plus的el-menu怎么修改el-sub-menu的template的B的颜色？

Stack Overflow 翻译