Loading an external script using <script src="..."> in Angular

Question

I need to include a script that has a session ID in the URL (I wouldn't normally do this, but I'm using Crocodoc to embed documents into the page and they don't seem to have another way of doing it without using an iFrame which isn't customizable):

<!--sets a global variable "_doc" that is needed for initialization-->
  <script src="//crocodoc.com/webservice/document.js?session=tohY5vh3dPjUbmW6_imSQFshvQUsJ3fuJFyG7CxBU-E3AArTbELI3U0bSJBm6z5ZKtXpJQCnJ-EU1J2WGbuu6WH4e3Bglcy38TplHg"></script>

I tried simple things like:

<script ng-src="//crocodoc.com/webservice/document.js?session={{ file.crocodoc_session }}"></script>

This writes the tag out fine, but the script is never requested. I also tried using just "src" instead of "ng-src" but that makes a request with "{{ file.crocodoc_session }}" in the URL, and doesn't make another request once the session ID value is actually written.

The last thing I tried was to make a directive with a compile function, in which I use jQuery to set the src attribute. That worked, expect that I couldn't figure out how to pass the session ID to the compile function. I used a "session" attribute on the element, but when I pass a variable (or use session="{{ file.crocodoc_session }}") I get the variable name as a string instead of it's value.

Answer 1

Try evaluating the link inside the controller, assigning it to a scope variable and then referencing it in the ng-src.