Angular $parse error when updating 1.2.8

Question

I'm trying to update Angular 1.0.8 to 1.2.8 in one of my project. For the while everything's ok except for one thing.

Here is the error :

Error: [$parse:syntax] Syntax Error: Token 'undefined' expected : at column null of the expression [//my.url.com/some/path/mySwf.swf?someParam=en

Here's my DOM :

<embed data-embed-src embed-src="{{simulatorUrl}}" type="application/x-shockwave-flash" width="100%" height="450" allowscriptaccess="always"
           wmode="transparent" quality="high" swliveconnect="true" name="Simulator" id="Simulator"
           flashvars="">

Because ngSrc doesn't work I use a directive to watch src attributes :

angular.module('myApp')
.directive('embedSrc', function () {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
            var current = element;

                scope.$watch(attrs.embedSrc, function () {
                    var clone = element
                        .clone()
                        .attr('src', attrs.embedSrc);
                    current.replaceWith(clone);
                    current = clone;
                });
        }
    };
});

I tried few things without success :

• First, change sanitization : $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);

• Disable $sceProvider

• Try to put my url in $sce trusted ressourceUrl

• Try to prefix my url with 'http:'

If my url look like : 'www.myurl.com/mySwf.swf' it works but without params unfortunately. To test, if I put the url expression {{simulatorUrl}} in a ng-href :

<a ng-href="{{simulatorUrl}}">Salut</a>

It works like a charme. $parse doesn't throw error.

I think it's because of my directive or the $sce but I'm not sure.

If someone has already embed swf with angular 1.2.8, please let me know :)

Answer 1

The problem

embed-src={{...}} is an interpolated expression. At the time the post-link function os executed, interpolated expressions in Angular have to been processed yet, so attrs.embedSrc is basically a string with content {{...}}.
Thus, calling scope.$watch(attrs.embedSrc,...) is equivalent to calling `scope.$watch('{{..}}',...) which causes an error.

The solution

For observing interpolated attributes (or attributes in general), one should use Attributes' $observe(key, fn) method:

$observe(key, fn)
Observes an interpolated attribute.

The observer function will be invoked once during the next $digest following compilation. The observer is then invoked whenever the interpolated value changes.

So, you should use: attrs.$observe('embedSrc',...)

---

For a more detailed explanation, take a look at this answer.