[英]Equivalent of ng-src for “Value” attributes in AngularJS
With AngularJS, I am trying to embed a vimeo link to one of my pages. 使用AngularJS,我试图将vimeo链接嵌入到我的页面之一。 However, depending on if the user is coming from HTTPs or HTTP, we will change the URL accordingly. 但是,根据用户是来自HTTP还是来自HTTP,我们将相应地更改URL。
<div class="video">
<object width="640" height="480">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="{{sslCheck}}//vimeo.com/moogaloop.swf?clip_id=12345&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=666699&fullscreen=1" />
<embed ng-src="{{sslCheck}}//vimeo.com/moogaloop.swf?clip_id=12345&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=666699&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="480">
</embed>
</object>
</div>
sslCheck in the controller will be either be "https:" or "http" . 控制器中的sslCheck将为“ https:”或“ http” 。
The problem is while ng-src fetches the URL correctly for both HTTPs and HTTP in Google Chrome, but 问题是ng-src可以正确获取HTTPs和Google Chrome中HTTP的URL,但是
<param name="movie" value="{{sslCheck}}//vimeo.com/moogaloop.swf?clip_id=12345&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=666699&fullscreen=1" />
did not in Google Chrome (although it works in FF). 不在Google Chrome中运行(尽管它在FF中有效)。 In the console, we can see that it is trying to fetch 在控制台中,我们可以看到它正在尝试获取
https://myDomain.com/ %7B%7BmovieURL%7D%7D //vimeo...... https://myDomain.com/%7B%7BmovieURL%7D%7D // vimeo ......
Do I need to create a Directive for this, or is there something out of box in AngularJS I can use? 我是否需要为此创建一个指令,或者我可以使用AngularJS中的一些新东西?
Thank you! 谢谢!
Actually, I think the best way is to just leave off the sslCheck. 实际上,我认为最好的方法就是不使用sslCheck。 The browser should handle that for you, similar to how it does with CDNs like: 浏览器应该为您处理此问题,类似于对CDN的处理方式,例如:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
So your code would just be: 因此,您的代码就是:
<div class="video">
<object width="640" height="480">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="//vimeo.com/moogaloop.swf?clip_id=12345&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=666699&fullscreen=1" />
<embed ng-src="//vimeo.com/moogaloop.swf?clip_id=12345&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=666699&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="480">
</embed>
</object>
</div>
It looks as though a directive is going to be your best bet here, but you could essentially create a directive param which emulates the native param tag as such: 看起来指令似乎是您最好的选择,但是您可以从本质上创建一个指令param来模拟本机param标签,如下所示:
module.directive("param", function(){
return {
scope: {
value: "@",
},
link: function( scope, element, attrs ){
element.attr("value", scope.value );
}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.