AngularJS：非标准属性的ng-src行为？

发布时间：2020-12-17 08:05:35 所属栏目：安全来源：网络整理

导读：我正在使用“ Video For Everybody”发生器在我的应用程序中集成媒体播放器。如果浏览器不支持HTML5视频和音频播放器，则播放器具有回退功能，因此我必须使用视频和占位符(图像)源构建具有param属性的对象元素。正如预期的那样，我遇到了古典的表达式问题不

我正在使用“ Video For Everybody”发生器在我的应用程序中集成媒体播放器。如果浏览器不支持HTML5视频和音频播放器，则播放器具有回退功能，因此我必须使用视频和占位符(图像)源构建具有param属性的对象元素。

正如预期的那样，我遇到了古典的表达式问题不能及时解决，我的浏览器发送请求到my.media.com/{{video.src}}，而不是my.media.com/somevideo.mp4

不幸的是，我面对同样的问题，有几个属性(海报，flashvars，占位符等)。我将如何创建与ng-src或ng-href指令相同的行为？我尝试寻找相关的源代码，但我没有找到它。这是一个片段，展示了有问题的HTML，

<video controls="controls" poster="{{mediaModel.mediaFile2}}" width="300" height="150">
<source ng-src="{{mediaModel.mediaFile}}" type="{{mediaModel.contentType}}" />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="300" height="150">
    <param name="movie" value="http://player.longtailvideo.com/player.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="{{'controllerbar=over&amp;image=' + media.mediaFile2 + '&amp;file=' + mediaModel.mediaFile}}" />
    <img ng-src="{{mediaModel.mediaFile2}}" width="300" height="150" title="{{mediaModel.uploadedTime}}" />
</object>

在官方API文档中查找内置伪指令的源码变得容易。在这种情况下，请参阅 ngSrc的文档，页面顶部会显示两个按钮“改进此文档”和“查看源代码”，点击“查看源代码”，它将自动将您转到正确的源文件指令的定义。这一切都适用于所有内置的指令，非常方便！

下面我粘贴了代码为ngSrc，这有趣的是看起来并不复杂，关键的线似乎是优先级：99，根据旁边的注释，优先级为99的指令将在属性一直运行插值。

// ng-src,ng-srcset,ng-href are interpolated
forEach(['src','srcset','href'],function(attrName) {
  var normalized = directiveNormalize('ng-' + attrName);
  ngAttributeAliasDirectives[normalized] = function() {
    return {
      priority: 99,// it needs to run after the attributes are interpolated
      link: function(scope,element,attr) {
        attr.$observe(normalized,function(value) {
          if (!value)
             return;

          attr.$set(attrName,value);

          // on IE,if "ng:src" directive declaration is used and "src" attribute doesn't exist
          // then calling element.setAttribute('src','foo') doesn't do anything,so we need
          // to set the property as well to achieve the desired effect.
          // we use attr[attrName] value since $set can sanitize the url.
          if (msie) element.prop(attrName,attr[attrName]);
        });
      }
    };
  };
});

鉴于上述情况，实施自己的指令应该是微不足道的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!