AngularJS throwing syntax parse error when using expression as a parameter of a function

Question

I'm getting an error when trying to parse this markup, basically I need to use an expression as a parameter of the function in the ng-click, but it's not letting me. If I don't use an expression then the src in the img src="{{image.media.m}}" ng-model="image.media.m" will get cleared when clicking on the album img causing the image to disappear. This error causes my saveToAlbum function to not work the way it should..

What would be the proper way of writing this I wonder? And why exactly isn't this allowed?

<ul class="images-list">
    <li ng-repeat="image in imageGroup" ng-controller="albumsCtrl">
        <img src="{{image.media.m}}" ng-model="image.media.m">
        <div class="topDiv">
            <img src="img/album.png" ng-click="saveToAlbum({{image.media.m}}, undefined)">
        </div>
        <div class="bottomDiv" ng-controller="favoritesCtrl">
            <img src="img/favorites.png" ng-click="addToFavorites(image.media.m)">
        </div>
    </li>
</ul>

The error:

Error: [$parse:syntax] http://errors.angularjs.org/1.3.10/$parse/syntax?p0=%7B&p1=invalid%20key&p2=14&p3=saveToAlbum(%7B%7Bimage.media.m%7D%7D%2C%20undefined)&p4=%7Bimage.media.m%7D%7D%2C%20undefined)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:6:417
at hb.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:190:254)
at hb.object (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:199:435)
at hb.primary (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:189:308)
at hb.unary (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:197:82)
at hb.multiplicative (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:196:324)
at hb.additive (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:196:182)
at hb.relational (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:196:48)
at hb.equality (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:195:418) <img src="img/album.png" ng-click="saveToAlbum({{image.media.m}}, undefined)">

saveToAlbum({{image.media.m}}, undefined) should be saveToAlbum(image.media.m, undefined) — Chandermani
– Chandermani, Commented Feb 9, 2015 at 15:46
use ngSrc for the src='' and loose the {{}} i the saveToAlbum function. — satchcoder
– satchcoder, Commented Feb 9, 2015 at 15:47
@satchcoder It's ng-src not ngSrc though, but that did the trick. Post as answer so I can accept it. — Chrillewoodz
– Chrillewoodz, Commented Feb 9, 2015 at 15:53
@Chrillewoodz ngSrc is the normalized name of the directive. You can then use data-ng-src or ng-src. @satchcoder are you sure {{}} can be omitted? My code seems to still require them even in ngSrc — M.K. Safi
– M.K. Safi, Commented Feb 9, 2015 at 15:57

satchcoder · Accepted Answer · 2015-02-09 15:56:58Z

4

use ng-src for the src='' and loose the {{}} i the saveToAlbum function

answered Feb 9, 2015 at 15:56

satchcoder

7975 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS throwing syntax parse error when using expression as a parameter of a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related