Angular1.3.X中embed标签使用ng-src的bug

在项目中需要在页面中引入优酷的视频,于是使用了embed标签,并用ng-src动态绑定了视频链接。

在使用中发现页面展现时,视频那一块儿并没有加载出来,查看HTML源码,Angular明明已经把视频链接绑定成功了。所以问题应该在于浏览器没有主动去加载ng-src指向的视频。

后来经过了解,这是Angular 1.3版本的一个bug。

github上关于这个问题的讨论:issue:ngSrc doesn't work with embed


下面贴出我的代码和整理的解决方案:

之前不成功的绑定:

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

解决办法:

使用指令自己绑定视频链接,检测到视频链接发生变化的时候,在dom中替换掉之前的embed标签。

1、HTML中的指令:

<embed embed-src="....">
2.js文件中对应的指令:

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;
      });
    }
  };
})








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值