CODEWITHSUNDEEP
angularjsangularjs-directive
guy mograbi
guy mograbi

Reputation: 28618

AngularJS paging directive not working

I am trying to write a simple paging directive of my own in angularjs.

please see the code at http://plnkr.co/edit/M7kIjoKNmIWXOyRDfzZg

When I click "next" I get an exception saying : Non-assignable model expression: 1

What am I doing wrong?

Upvotes: 2

Views: 1607

Answers (2)

rtcherry
rtcherry

Reputation: 4880

The isolation scope in your directive should be:

scope: {
    'currentPage': '@',
    'pageSize': '@',
}

Using = expects the value to be a reference to a value in the parent scope in order to do two way data binding. If you want to use =, you should make currentPage and pageSize items on your controller and then do <paging page-size="pageSize" current-page="currentPage"></paging>.

Edit: Using @ will make currentPage and pageSize strings, so you will need to use parseInt.

Upvotes: 3

Mathew Berg
Mathew Berg

Reputation: 28750

The problem is you're assigning the model of currentPage in your scope: 

'currentPage':'=',

But when you create the directive in index.html you pass in a value

<paging page-size="1" current-page="1"></paging>

So there are two ways to fix this, one would be to create another variable in your controller called current page and then change your directive to this:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.currentPage = 1;
});

html

<paging page-size="1" current-page="currentPage"></paging>

Or change how you create your scope in your directive to this:

 scope:{
   'currentPage':'@',
   'pageSize':'=',
 }

you will have to parse it into an int if you use this route, as it comes in as a string

Upvotes: 1

Related Questions