javascript - angularJS不主动去加载视频？

Question

我使用ng-src引用了优酷的视频，代码如下：

<embed type="application/x-shockwave-flash" class="edui-faked-video" pluginspage="http://www.macromedia.com/go/getflashplayer" ng-src="{{videoDetail.videocode|trusted}}" width="740" height="500" wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" />

那么我查看渲染后的HTML，ng-src确实已经得到视频地址：

但是页面那一块儿是空白的，连优酷的视频框都没有；；；

补充：如果我把上面截图中的HTML放到一个测试页面里，视频是可以加载播放的【或者说我把ng-src那里换成一个普通的优酷视频地址，是正常的】

所以，Angular为什么不去加载视频呢？怎么解决这个问题

Answer 1

这是一个已知bug，不过目前你可以通过自己手写一个指令来解决这个问题

app.directive('embedSrc', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var current = element;
            scope.$watch(attrs.embedSrc, function () {
                var clone = element.clone().attr('src', attrs.embedSrc);
                current.replaceWith(clone);
                current = clone;
            });
         }
    };
})

<embed embed-src="...">

详细的讨论，在issue

Answer 2

最终在issue里面找到下面的代码成功地跑起来：

app.directive('embedSrc', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var current = element;
      scope.$watch(function() { return attrs.embedSrc; }, function () {
        var clone = element
                      .clone()
                      .attr('src', attrs.embedSrc);
        current.replaceWith(clone);
        current = clone;
      });
    }
  };
})

对应的html : <embed embed-src="...">