$ scope не обновляется при использовании ng-if

0

На Angular 1.3.x я сделал выбор, который вызывает функцию ng-change. У окружающего есть инструкция ng-if.

HTML

<div class="form-group" ng-if="property">
  <label for="city-picker">in</label>
  <select class='form-control focus input-sm' ng-model="cityIds" ng-options="city.id as city.name for city in cities" ng-change="getMetrics(cityIds)">
    <option value="">all</option>
  </select>
</div>

контроллер

app.controller('MainCtrl', function($scope) {
  $scope.cities = [{
   name: "Amsterdam",
   id: 1
  },{ 
   name: "paris",
   id: 2
  }]
  $scope.property = true;
  $scope.getMetrics =  function(cityIds) {
    console.log(cityIds);
    console.log('$scope.cityIds is undefined: ', $scope.cityIds);
  }
});

Когда я изменяю поле выбора, функция ng-change вызывается с правильным обновлением $ scope, однако область $ scope не обновляется.

См. Следующий плункер: http://plnkr.co/edit/sQaLts5xyGBjThjdQJwM

Когда я удаляю инструкцию ng-if, $ scope корректно обновляется с помощью ввода select. Может ли кто-нибудь объяснить это поведение?

Теги:
angularjs-scope

1 ответ

3
Лучший ответ

Директива ng-if создает новую область, которая прототипически наследуется от родительской области. Итак, ваша ng-model = "cityIds" обновляет cityIds в этой новой области.

Используйте объект в родительской области и обратитесь к нему из вашей ng-модели.

Например:

в вашем контроллере определите

$scope.data = {cityIds: null};

и, ссылайтесь на это из шаблона

ng-model="data.cityIds"

Это гарантирует, что вы всегда имеете дело с родительскими данными.

  • 0
    Или используйте синтаксис «контроллер как», чтобы присвоить контроллеру имя и получить к нему доступ через модель.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню