angularjs不能为html5视频src分配变量

Question

我收到Error while interpolating: videos/{{video.name}}的错误，代码如下：

<div ng-repeat='video in videos'>
        <div class="col-md-3">
        <video controls>
          <source src="videos/{{video.name}}" type="video/mp4">
          Your browser does not support HTML5 video.
        </video>
        {{video.name}} // this worked
        </div>
    </div>

尝试过ng-src但是没有用。奇怪。

Answer 1

使用此过滤器，

app.filter("trustUrl", ['$sce', function ($sce) {
        return function (recordingUrl) {
            return $sce.trustAsResourceUrl(recordingUrl);
        };
    }]);

<强> HTML

    <video controls>
      <source src="videos/{{video.name | trustUrl}}" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>

Answer 2

试试这个：

Html：

<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat='video in videos'>
        <div class="col-md-3">
        <video controls>
          <source src="videos/{{video.name}}" type="video/mp4">
          Your browser does not support HTML5 video.
        </video>
        {{video.name}} // this worked
        </div>
    </div>
</div>

JS：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.videos = [
      {"name":"alpha"},
      {"name":"beta"},
      {"name":"gama"}
    ]
});

Working demo!