javascript

Question

我正在尝试在 Angular 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)

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

score 33 · Accepted Answer

Angular 1.2 默认启用严格上下文转义 (SCE)。您需要稍微调整代码以使其正常工作。

HTML

更改标记，以便ng-src绑定到变量而不是 URL + 变量，就像您之前设置的那样：

<video controls ng-src="{{videoUrl}}"></video>

添加$sce以注入 SCE 提供程序并使用$sce.trustAsResourceUrl设置的方法videoUrl。

function MyControl($scope, $sce) {
    var videoUrl = 'http://www.thebigdot.com/1234.mp4';
    $scope.videoUrl = $sce.trustAsResourceUrl(videoUrl);
}

这是此设置的JS Bin 演示。

score 6 · Accepted Answer

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

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

score 2 · Accepted Answer

我建立了这个指令

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>

score 0 · Accepted Answer

在找到以前的帖子之前，我做了简单的 hack。有人会发现这很有用

HTML：

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

控制器.js

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

score 0 · Accepted Answer

我对 Angular 的 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>

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

5 回答 5

HTML

JavaScript

Related

Reference