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

问题描述

我在我的应用程序使用视频为大家的发生器集成了媒体播放器。当玩家拥有一个后备闪烁如果浏览器不支持HTML5 视频和音频我要建一个对象与参数元素与视频和占位符（图片）来源属性。

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.

正如预期的那样我碰上前pressions的不能及时得到解决的经典问题，我的浏览器将请求发送到 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

不幸的是有几个属性（海报，Flash变量，占位符来仅举几例），我面临同样的问题。我怎么会去创建相同的行为NG-SRC或NG-的href指令？我试图寻找相关的源$ C ​​$ C，但我还没有找到它。这里是一个展示的问题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!

在下面，我粘贴code代表ngSrc，其中有趣的是看起来并不复杂可言，关键线路似乎是优先级：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屋！