Question

我正在使用“Video For Everybody”生成器在我的应用中集成媒体播放器。如果浏览器不支持HTML5 video和audio，则播放器具有后备闪存功能，我必须使用视频和占位符构建object元素，其中包含param个属性（图片）来源。

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

不幸的是，有几个属性（poster, flashvars, placeholder仅举几例），我面临同样的问题。我将如何创建与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>

Answer 1

您现在可以使用ng-attr-poster，或者更常见的是ng-attr-whatever。

Answer 2

在官方API文档中轻松查找内置指令的来源。在这种情况下，请转到ngSrc的文档，在页面顶部您会看到两个按钮，＆＃34;改进此文档＆＃34;和＆＃34;查看来源＆＃34;，点击＆＃34;查看来源＆＃34;它会自动将您带到定义指令的正确源文件。这适用于所有内置指令，非常方便！

下面我粘贴了ngSrc的代码，有趣的是它看起来并不复杂，关键的行似乎是priority: 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]); }); } }; }; });

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

Answer 3

因此，最通用，可维护，可配置和可重用的解决方案是创建一个可以为您处理它的自定义指令。

看看这个-->PLNKR<--几乎所有你需要的东西。你只需稍微削弱它。

工作原理：传递配置对象的指令（如果需要更多对象，只需创建其他属性）。元素可以处于两种状态：准备好还是不准备好。 $scope.isReady只是说明是否收集了所有成分。如果是这样ngSwitch加载了videoPlayer模板，并且因为所有信息都没有发送不需要的请求。

Answer 4

我在poster标记上遇到了video属性的类似问题。如果您将ng-cloak应用于具有src类似属性的元素，则他们不会尝试加载任何内容，直到它们在删除隐身时变得可见。

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

4 个答案: