angularjs - AngularJS分页指令不起作用

Question

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

请参阅 http://plnkr.co/edit/M7kIjoKNmIWXOyRDfzZg上的代码

当我单击“下一步”时，我收到一个异常消息： Non-assignable model expression: 1

我究竟做错了什么？

Answer 1

您的指令中的隔离范围应该是：

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

Using=期望该值是对父范围中的值的引用，以便进行双向数据绑定。如果你想使用=，你应该在你的控制器上制作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>

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

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

html

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

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

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

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