Question

我正在尝试在角度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 lib，它可以工作。

cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js (works)

这是最新版本中的错误还是故意禁用？有什么工作？

Answer 1

Angular 1.2默认启用Strict Contextual Escaping（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。

Answer 2

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

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

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

Answer 3

我构建了这个指令

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>

Answer 4

在我找到上一篇文章之前，我做了简单的黑客攻击。有人可以找到这个有用的

HTML：

<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>";

Answer 5

我对版本1.5.0的角度有同样的问题。当我更改版本（我使用1.4.8版本）时，我的问题就解决了。

.controller('MainCtrl',['$scope','$stateParams','DepartementFactory',
        function($scope,$stateParams,DepartementFactory) {
            $scope.currentDate=new Date();
            DepartementFactory.getDepartements().then(function(data){
               $scope.departements=data;
               $scope.departements.logo="work"; 
            });
        }
    ]
)

<div class="work">
    <a>
        <img src="images/{{departements.logo}}" class="media" alt=""/>
        <div class="caption">
            <div class="work_title">
                <h1>{{departements.libelle}}</h1>
            </div>
        </div>
    </a>
</div>

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

5 个答案:

HTML

的JavaScript