AngularJS:非标准属性上的 ng-src 行为? [英] AngularJS: ng-src behavior on non-standard attributes?

问题描述

我正在使用人人视频"生成器在我的应用中集成媒体播放器.由于如果浏览器不支持 HTML5 video 和 audio，播放器会回退到 Flash，我必须使用 构建一个 object 元素>param 属性与视频和占位符(图像)源.

I'm integrating a media player in my app using the "Video For Everybody" generator. As the player features a fallback to flash if the browser doesn't support HTML5 video and audio I have to build an object element with param attributes with the video and placeholder (image) source.

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

As expected I run into the classical problem of expressions not being resolved in time, my browser sends requests to my.media.com/{{video.src}} rather then my.media.com/somevideo.mp4

不幸的是，有几个属性(poster、flashvars、placeholder 仅举几例)我遇到了同样的问题.我将如何创建与 ng-src 或 ng-href 指令相同的行为?我试图寻找相关的源代码，但我还没有找到.这是一个展示有问题的 HTML 的片段，

Unfortunately there are several attributes (poster, flashvars, placeholder to name a few) where I face the same problem. How would I go about creating the same behavior as the ng-src or ng-href directives? I tried looking for the relevant source code, but I haven't found it. Here is a snippet which showcases the problematic 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 的文档，在页面顶部您将看到两个按钮，改进此文档"和查看源代码"，单击查看源代码"，它会自动将您带到定义指令的正确源文件.这适用于所有内置指令，非常方便！

Finding the source of build-in directive is made easy on the official API documentation. In this case go to the documentation of ngSrc , at the top of the page you will see two buttons, "Improve this doc" and "View source", click on "View source" and it will automatically take you to the correct source file where the directive is defined. This works across all build-in directive, very handy!

下面我粘贴了 ngSrc 的代码，有趣的是它看起来并不复杂，关键行似乎是 priority: 99，根据旁边的注释意味着指令优先级为 99 将在插入属性后运行.

Below I'm pasting the code for ngSrc, which interestingly enough does not look complicated at all, the crucial line seems to be priority: 99, based on the comment next to it means that directives with priority of 99 will run after attributes have been interpolated.

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

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

Given the above it should be trivial to implement your own directive.

这篇关于AngularJS:非标准属性上的 ng-src 行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！