Angular JS ng-include绑定问题

Question

Angular JS ng-include绑定问题

angularjsangular-template

6

我使用模板文件创建了一个分页小部件，并在我的HTML页面中使用了两次。我有一个用于跳转到页面选项的选择框，以及上一页和下一页的链接。

问题在于，当我使用选择框更新当前页面并使用上一页和下一页链接时，当前页面会被更新，但选择框不会被更新。

请告诉我我做错了什么。我在构建这样的分页小部件时是否存在任何逻辑错误？

控制器代码:

 var gallery = angular.module('gallery', []);
    gallery.controller('ItemListCtrl', ['$scope', function($scope){
      /*  Pagination Code */
    $scope.currentPage = 1;
    $scope.itemsPerPage = 24;
    $scope.total = 100;
    $scope.range = function(min, max, step){
      step = step || 1;
      var input = [];
      for (var i = min; i <= max; i += step) input.push(i);
      return input;
    };
    $scope.prevPage = function (){
      if($scope.currentPage > 1){
        $scope.currentPage--;
      }
    };
    $scope.nextPage = function (){
      if($scope.currentPage < $scope.pageCount()){
        $scope.currentPage++;
      }
    };
    $scope.pageCount = function (){
      return Math.ceil($scope.total / $scope.itemsPerPage);
    };
    $scope.setPage = function (n){
      if(n >= 0 && n <= $scope.pageCount()){
        $scope.currentPage = parseInt(n, 10);
      }
    };
  }]);

这是用于重现问题的plnkr URL链接。

http://plnkr.co/edit/9LUJnVzWAS9BauyORQn5?p=preview

- Abdul Haseeb

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rebornix · Accepted Answer

根本原因是ng-include会为目标元素创建一个单独的作用域，因此您的代码的快速修复方法是将$parent前缀添加到所有作用域对象中。

<fieldset class="pager">
<div>Page {{$parent.currentPage}} of {{$parent.pageCount()}}</div>
<div>
<div>
<label>Go to page</label>
<select ng-model='$parent.currentPage' ng-change="$parent.setPage($parent.currentPage)">
<option ng-repeat="n in range(1,$parent.pageCount())" value="{{n}}" ng-selected="n === $parent.currentPage">{{n}}</option>
</select>
</div>
<div>
<a href ng-click="$parent.prevPage()">Previous Page</a>
&nbsp;|&nbsp; 
<a href ng-click="$parent.nextPage()">Next Page</a>
</div>
</div>
</fieldset>

根据 Angular 文档《理解作用域》，当您尝试将 2-way 数据绑定（即表单元素、ng-model）到原始类型时，作用域继承不会按照您的预期工作。避免这个原始类型问题的最佳做法是始终在 ng-models 中加入“.”。请参考此视频。