$ scope не обновляется в AngularJS

Question

У меня есть встроенная разбивка на страницы и сортировка в моем проекте AngularJS. Я хочу показать данные в соответствии со страницей для каждого элемента, используя выбор пользователя. Когда я интегрирую эту вещь, у меня возникла проблема обновления переменной области. Вот мой код:

<div dir-paginate="partners in partnersData|orderBy:orderByField:reverseSort |filter:{name: partners.name, website: partners.website, location: partners.location}|itemsPerPage: limitData as filteredArray" current-page="currentPage"> 
      <div class="rowDiv"> 
      <div class="cellDiv"><span ng-click="makeFavourite(partners)" class="star_rating" ng-class="{'select':partners.select}"></span> <span ng-click="showImage($index)"></span></div> 
      <div class="cellDiv" ng-click="showName($index)">{{partners.name}}</div> 
      <div class="cellDiv" ng-click="openWebsite(partners.website)">{{partners.website}}</div> 
      <div class="cellDiv">{{partners.location}}</div> 
      <div class="cellDiv">{{partners.service}}</div> 
      <div class="cellDiv">{{partners.connection}}</div> 
      <div class="cellDiv">{{partners.action}}</div> 
      <div class="cellDiv lastCell"><span class="icon_pluse" ng-click="openPlus($index)"></span><span class="icon_info" ng-click="openInfo($index)"></span></div> 

меня включить файл для пагинацией и для элемента на странице:

<dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="templates/dashboard/dirPagination.tpl.html"></dir-pagination-controls> 

Это файл dirPagination.tpl.html:

<select class="filterSelect" ng-options="limits.value as limits.value for limits in availableLimits" ng-model="limits" ng-change="selectLimit()"> 
         <!--<option style="display:none" value="">Select</option>--> 
        </select> 

контроллер код:

$scope.currentPage = 1; 
    $scope.limitData = 1;    
    $scope.selectLimit = function() 
    { 
     //console.log($scope.limits); 
     var limits = $scope.limits 
     $scope.limitData = limits; 
    }; 

Answer 1

P арендуйте этот код. Он работает нормально.

http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

function MyController($scope) { 

    $scope.currentPage = 1; 
    $scope.pageSize = 10; 
    $scope.meals = []; 

    var dishes = [ 
    'noodles', 
    'sausage', 
    'beans on toast', 
    'cheeseburger', 
    'battered mars bar', 
    'crisp butty', 
    'yorkshire pudding', 
    'wiener schnitzel', 
    'sauerkraut mit ei', 
    'salad', 
    'onion soup', 
    'bak choi', 
    'avacado maki' 
    ]; 
    var sides = [ 
    'with chips', 
    'a la king', 
    'drizzled with cheese sauce', 
    'with a side salad', 
    'on toast', 
    'with ketchup', 
    'on a bed of cabbage', 
    'wrapped in streaky bacon', 
    'on a stick with cheese', 
    'in pitta bread' 
    ]; 
    for (var i = 1; i <= 100; i++) { 
    var dish = dishes[Math.floor(Math.random() * dishes.length)]; 
    var side = sides[Math.floor(Math.random() * sides.length)]; 
    $scope.meals.push('meal ' + i + ': ' + dish + ' ' + side); 
    } 

    $scope.pageChangeHandler = function(num) { 
     console.log('meals page changed to ' + num); 
    }; 
} 

Answer 2

пропущена ";" в конце var limits = $scope.limits? Иногда JS приводит вас в замешательство с этими типами ошибок.

Answer 3

Это проблема наследования сферы в Angular или Javascript. Подробнее об этом here.

Чтобы устранить проблему, сначала необходимо определить объект, как это:

$scope.modelData = {}; 
$scope.modelData.currentPage = 1; 
$scope.modelData.limitData = 1; 

$scope.selectLimit = function() { 
    $scope.modelData.limitData = $scope.limits; 
}; 

Теперь, обновить свои взгляды, чтобы использовать новый объект $scope.modelData (я пишу это в одном месте, вы можете исправить это в другой места если таковые имеются):

<div dir-paginate="partners in partnersData|orderBy:orderByField:reverseSort |filter:{name: partners.name, website: partners.website, location: partners.location}|itemsPerPage: modelData.limitData as filteredArray" 
    current-page="modelData.currentPage"></div> 

Определение объекта $scope.modelData и использовать его все места устранит проблему вложенного объема, который создается выражением repeat.