我在我们的网站上使用Angular,并且很难让指令正常工作。我有一个指令,试图使用Flash和媒体播放器来显示通过动态构建对象标签并在正确的位置插入URL来选择的视频。
这是指令
app.directive('movie', function() {
var params = "&autoPlay=true&verbose=true&plugin_AdaptiveStreamingPlugin=http://D28C.wpc.azureedge.net/80D28C/amsplayer/assets/MSAdaptiveStreamingPlugin-v1.0.13-osmf2.0.swf&AdaptiveStreamingPlugin_retryLive=true&AdaptiveStreamingPlugin_retryInterval=10";
return {
restrict: 'E',
link: function(scope, element, attrs) {
var url = scope.$eval(attrs.src);
element.replaceWith('<object width="640" height="400" id="flashPlayer" ' +
'data="http://D28C.wpc.azureedge.net/80D28C/amsplayer/assets/StrobeMediaPlayback.2.0.swf" ' +
'type="application/x-shockwave-flash"><param name="allowfullscreen" value="true"> ' +
'<param name="wmode" value="direct"> ' +
'<param name="flashvars" value="src=' + url + params + '">' +
'</object>');
}
};
});
这是html
<div>
<movie src="vm.video.fileUri" />
</div>
在Chrome中,在调试时,指令中的这一行:
var url = scope.$eval(attrs.src);
正确包含attrs.src的值 vm.video.fileUri 。 但是,当我执行该行时 - 该值未定义,而不是我们想要显示的视频的网址。
我尝试使用范围手动查找值。$ parent。$ eval在控制台窗口中 - 但找不到网址。我做错了什么???
我最终使用了 undefined 这个词,其中包含渲染的html中的所有对象参数
感谢
答案 0 :(得分:0)
您可以尝试在指令中定义局部范围并获取其值吗?建议在创建自定义指令时在DDO上设置范围。这样我们就可以确保该指令不会干扰父作用域。
app.directive('movie', function() {
var params = "&autoPlay=true&verbose=true&plugin_AdaptiveStreamingPlugin=http://D28C.wpc.azureedge.net/80D28C/amsplayer/assets/MSAdaptiveStreamingPlugin-v1.0.13-osmf2.0.swf&AdaptiveStreamingPlugin_retryLive=true&AdaptiveStreamingPlugin_retryInterval=10";
return {
restrict: 'E',
scope: {
src: '='
},
link: function(scope, element, attrs) {
var url = scope.src;
element.replaceWith('<object width="640" height="400" id="flashPlayer" ' +
'data="http://D28C.wpc.azureedge.net/80D28C/amsplayer/assets/StrobeMediaPlayback.2.0.swf" ' +
'type="application/x-shockwave-flash"><param name="allowfullscreen" value="true"> ' +
'<param name="wmode" value="direct"> ' +
'<param name="flashvars" value="src=' + url + params + '">' +
'</object>');
}
};
});
答案 1 :(得分:0)