Equivalent of ng-src for “Value” attributes in AngularJS

Question

With AngularJS, I am trying to embed a vimeo link to one of my pages. However, depending on if the user is coming from HTTPs or HTTP, we will change the URL accordingly.

 <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&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=666699&amp;fullscreen=1" />
        <embed ng-src="{{sslCheck}}//vimeo.com/moogaloop.swf?clip_id=12345&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=666699&amp;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" .

The problem is while ng-src fetches the URL correctly for both HTTPs and HTTP in Google Chrome, but

<param name="movie" value="{{sslCheck}}//vimeo.com/moogaloop.swf?clip_id=12345&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=666699&amp;fullscreen=1" />

did not in Google Chrome (although it works in FF). In the console, we can see that it is trying to fetch

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?

Thank you!

Answer 1

Actually, I think the best way is to just leave off the sslCheck. The browser should handle that for you, similar to how it does with CDNs like:

<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&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=666699&amp;fullscreen=1" />
        <embed ng-src="//vimeo.com/moogaloop.swf?clip_id=12345&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=666699&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="480">
        </embed>
    </object>
</div>

Answer 2

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:

module.directive("param", function(){
  return {
   scope: {
     value: "@",
   },
   link: function( scope, element, attrs ){
     element.attr("value", scope.value );
   }
  }
})