Question

我正在尝试在angularjs中编写一个我自己的简单分页指令。

请看代码 http://plnkr.co/edit/M7kIjoKNmIWXOyRDfzZg

当我点击“下一步”时，我得到一个例外说： Non-assignable model expression: 1

我做错了什么？

Answer 1

指令中的隔离范围应为：

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

使用=期望该值是对父作用域中的值的引用，以便进行双向数据绑定。如果您想使用=，则应在控制器上设置currentPage和pageSize项，然后执行<paging page-size="pageSize" current-page="currentPage"></paging>。

修改：使用@会生成currentPage和pageSize个字符串，因此您需要使用parseInt。

Answer 2

问题是你在你的范围内分配了currentPage的模型：

'currentPage':'=',

但是当你在index.html中创建指令时，你传递了一个值

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

所以有两种方法可以解决这个问题，一种方法是在控制器中创建另一个名为current page的变量，然后将指令更改为：

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

HTML

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

或者更改您在指令中创建范围的方式：

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

如果使用此路由，则必须将其解析为int，因为它以字符串形式出现

AngularJS分页指令不起作用

2 个答案: