angularjs Angular JS动态ng-src在1.2.0-rc.2中不工作

jhiyze9q 于 2022-10-31 发布在 Angular

关注(0)|答案(5)|浏览(148)

我试图在一个Angular JS应用中实现一个video元素，而ng-src无法读取scope变量
我使用的是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)

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

angularjs

来源：https://stackoverflow.com/questions/19372300/angular-js-dynamic-ng-src-not-working-in-1-2-0-rc-2

5条答案

按热度按时间

b1uwtaje1#

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

赞(0）回复(0）举报 2022-10-31

bweufnob2#

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

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

赞(0）回复(0）举报 2022-10-31

5sxhfpxr3#

我构建了这个指令

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>

赞(0）回复(0）举报 2022-10-31

webghufk4#

我做了简单的黑客之前，我发现以前的职位。有人可以找到这个有用的
于飞：

<div id="videoTag"></div>

Controller.js

document.getElementById("videoTag").innerHTML = "<video width='auto' height='auto' controls autoplay src=" + $scope.details.preview + ">Your browser does not support video</video>";

赞(0）回复(0）举报 2022-10-31

kyxcudwk5#

我在1. 5. 0版本的angular上也遇到了同样的问题。当我改变版本（我选择了1. 4. 8版本）时，我的问题就解决了。
第一个

赞(0）回复(0）举报 2022-10-31