CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-click
Schuere
Schuere

Reputation: 1649

parse syntax error ng-click from directive templateUrl

I'm starting out with some AngularJs practises and I would like to create dynamic pages based on a JSON file.

Upon loading the page I get the following error:

Error: [$parse:syntax] http://errors.angularjs.org/1.4.2/$parse/syntax?p0=%7B&p1=invalid%20key&p2=23&p3=SelectedPage.SetPage(%7B%7Bpage.Number%7D%7D)&p4=%7Bpage.Number%7D%7D)
at Error (native)
at http://localhost/AngularJs/scrpts/angular.min.js:6:416
at Object.q.throwError (http://localhost/AngularJs/scrpts/angular.min.js:209:32)
at Object.q.object (http://localhost/AngularJs/scrpts/angular.min.js:208:357)
at Object.q.primary (http://localhost/AngularJs/scrpts/angular.min.js:205:335)
at Object.q.unary (http://localhost/AngularJs/scrpts/angular.min.js:205:174)
at Object.q.multiplicative (http://localhost/AngularJs/scrpts/angular.min.js:204:434)
at Object.q.additive (http://localhost/AngularJs/scrpts/angular.min.js:204:261)
at Object.q.relational (http://localhost/AngularJs/scrpts/angular.min.js:204:96)
at Object.q.equality (http://localhost/AngularJs/scrpts/angular.min.js:203:425) <a ng-click="SelectedPage.SetPage({{page.Number}})" href="#">

the problem occurs in this templateUrl: navigation.html

<nav>
<ul>
    <li ng-repeat='page in Pages'>
        <a ng-click='SelectedPage.SetPage({{page.Number}})' href="#">{{page.Name}}</a>
    </li>
</ul>
</nav>

My guess is that the {{ }} syntax doesn't get accepted here but i'm not sure.

the directive call is as follows:

.directive('navigationPart', function(){
    return {
        templateUrl: 'components/navigation.html'
    };
})

I do get this element code in Html so in a way it does what i ask.

<nav>
<ul>
    <!-- ngRepeat: page in Pages --><li ng-repeat="page in Pages" class="ng-scope">
        <a ng-click="SelectedPage.SetPage(1)" href="#" class="ng-binding">Index</a>
    </li><!-- end ngRepeat: page in Pages --><li ng-repeat="page in Pages" class="ng-scope">
        <a ng-click="SelectedPage.SetPage(2)" href="#" class="ng-binding">Who</a>
    </li><!-- end ngRepeat: page in Pages -->
</ul>
</nav>

I would like to know what i'm doing wrong (why the error gets thrown)...

Upvotes: 2

Views: 1180

Answers (2)

plamut
plamut

Reputation: 3206

Here in this line:

<a ng-click='SelectedPage.SetPage({{page.Number}})' href="#">

You need to change it to:

<a ng-click='SelectedPage.SetPage(page.Number)' href="#">

The reason is that ng-click expects an Angular expression, which is evaluated on click. Double curly braces do not represent a valid expression token and Angular complains about it, raising an error.

If you find this a bit confusing, remember that the double curly braces syntax ({{...}}) is used to bind the model values to the DOM, while a lot of built-in directives work a bit differently - you don't bind anything in there, but instead need to provide an expression that is then evaluated in the element's scope.

Upvotes: 4

drys
drys

Reputation: 735

Try changing 

<a ng-click='SelectedPage.SetPage({{page.Number}})' href="#">{{page.Name}}</a>

to

<a ng-click='SelectedPage.SetPage(page.Number)' href="#">{{page.Name}}</a>

In ng-click, you access the page variable directly, no need for the braces. In other words, your guess is right.

Upvotes: 3

Related Questions