CODEWITHSUNDEEP
javascriptangularjsexpression
Chrillewoodz
Chrillewoodz

Reputation: 28338

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

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)">

Upvotes: 2

Views: 1933

Answers (1)

satchcoder
satchcoder

Reputation: 797

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

Upvotes: 4

Related Questions