Установка $ scope.myModel элемент с ng-change входит в бесконечный цикл

Я довольно новичок в Angular и пытаюсь добиться чего-то «основного». Я работаю в поисковых системах 2 дня без успеха и буду признателен за помощь.

У меня есть HTML-страницу, на которой я пытаюсь:

данных инициализировать запрос HTTP POST
Вызов функции с помощью события нг-изменения, чтобы обновить данные с другой HTTP POST когда элементы, используемые в качестве фильтров изменяются (т.е. категории, сортировка возр/убыв) ...

Моя проблема заключается в том, что, когда я обновляю модель программно с ответом HTTP (только в этом случае), он запускает n событие г-изменение прикреплено к элементу, который сам по себе вызывает функцию обновления, а затем входит в бесконечном цикле: нг смены -> обновление функции -> нг-изменение -> обновление функции

Примечания: Я используя шаблон Угловая материала, но это не меняет код

HTML

<html ng-app="MyApp"> 
    <body layout="column" ng-controller="SearchServiceController"> 
     <h1 class="md-headline">Filter results</h1> 
     <form name="searchServiceForm" novalidate> 
      <md-input-container> 
       <md-select placeholder="Choose category" ng-model="searchService.selectedCategory" ng-change="changedSearchServiceCriteria()"> 
        <md-option ng-value="category.value" ng-repeat="category in listOfCategories">{{ category.title }}</md-option> 
       </md-select> 
      </md-input-container> 
      <md-input-container> 
       <md-select placeholder="Sort by" ng-model="searchService.sortBy" ng-change="changedSearchServiceCriteria()"> 
        <md-option ng-value="criteria.value" ng-repeat="criteria in sortByCriterias">{{ criteria.title }}</md-option> 
        </md-select> 
       </md-input-container> 
      </form> 
      <h1 class="md-headline">{{ selectedCategory.title }}</h1> 
      <p class="md-body-1">{{ selectedCategory.description }}</p> 
    </body> 
</html>

var app = angular.module('MyApp', ['ngMaterial']); 

app.controller('SearchServiceController', function($scope, $http, $location) { 
    // Initialize data using the category id parameter in the URL 
    $http({ 
    method: 'POST', 
    url: '/projets/get-offerings-list', 
    data: {selectedCategory: $location.path().split("/")[4]}, 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    }) 
     .success(function(response) { 
     alert('INIT'); 
     $scope.listOfCategories = response.listOfCategories; 
     $scope.sortByCriterias = response.sortByCriterias; 
     $scope.searchService = response.searchService; 
     }) 
     .error(function(response) { 
     console.log('Failure occured'); 
     }); 

    // Update data 
    $scope.changedSearchServiceCriteria = function() { 
    $http({ 
    method: 'POST', 
    url: '/projets/get-offerings-list', 
    data: {selectedCategory: $location.path().split("/")[4]}, 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    }) 
     .success(function(response) { 
     alert('UPDATE'); 
     $scope.listOfCategories = response.listOfCategories; 
     $scope.sortByCriterias = response.sortByCriterias; 
     $scope.searchService = response.searchService; 
     }) 
     .error(function(response) { 
     console.log('Failure occured'); 
     }); 
    }; 
});

РЕЗУЛЬТАТ

INIT 
Object {listOfCategories: Array[3], sortByCriterias: Array[2], searchService: Object} 
UPDATE 
Object {listOfCategories: Array[3], sortByCriterias: Array[2], searchService: Object} 
UPDATE 
Object {listOfCategories: Array[3], sortByCriterias: Array[2], searchService: Object} 
UPDATE 
Object {listOfCategories: Array[3], sortByCriterias: Array[2], searchService: Object} 
UPDATE 
Object {listOfCategories: Array[3], sortByCriterias: Array[2], searchService: Object} 
UPDATE 
Object {listOfCategories: Array[3], sortByCriterias: Array[2], searchService: Object} 
....infinite loop....

Это не происходит, когда я обновляю модель программно без использования ответа запроса HTTP. См. Здесь: http://plnkr.co/edit/baNjr85eAOkKVu4dnf1m?p=preview У вас есть идеи о том, как я могу обновить элемент формы, не провоцируя событие ng-change?

Благодаря

Пожалуйста, обратите внимание, что я не хочу использовать обходной путь с помощью $ смотреть, как там: ngChange is called when model changed programmatically

источник

2015-07-16 l_r

Вы должны попытаться добавить рабочий пример в http://jsfiddle.net/ или аналогичный.

Я бы предположил, что вам не нужно проверять, что вам нужно сохранить последний поиск и запустить только запрос на обновление AJAX, если он изменится, поскольку каждый раз он получает новый адрес (или что-то подобное в JS) - хотя его то же значение и вновь оценивается

$scope.searchService = ""; 
$scope.lastSearch = "" 

// Update data using form elements 
$scope.changedSearch = function() { 

    if($scope.searchService != $scope.lastSearch){ 

     $http({ 
     method: 'POST', 
     url: '/projects/get-list', 
     data: $scope.searchService, 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }) 
     .success(function(response) { 
      // Request succeeded? Display message 
      console.log('UPDATE'); 
      console.log(response); 
      // Update data 
      $scope.listOfCategories = response.listOfCategories; 
      $scope.sortByCriterias = response.sortByCriterias; 
      $scope.searchForm = response.searchForm; 
     }) 
      .error(function(response) { 
      // Request failed? Display message 
      console.log('Failure occured'); 
     }) 
      .complete(function(response) { 
      // do after success or error 
      $scope.lastSearch = $scope.searchService; 
      console.log('complete'); 
     }); 
    } 
};

источник

2015-07-16 21:14:19 KeepCalmAndCarryOn

Спасибо за ваше предложение. Кажется, это ошибка. Я попробую. Я добавил пример Plunker, чтобы проиллюстрировать, как он должен работать. Я не добавлял Plunker, чтобы проиллюстрировать ошибку, поскольку она полагается на HTTP-запрос, и я не смог сделать это в Plunker без ссылки на удаленный сервер. –

Установка $ scope.myModel элемент с ng-change входит в бесконечный цикл

ответ

Смежные вопросы