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?
Add a comment
|
2 Answers
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.
Comments
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
