使用ng-if时$ scope不会更新

Question

在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);
  }
});

当我更改选择字段时，将使用正确的$ scope更新来调用ng-change函数，但是，不会更新$ scope。

请参阅以下插件： http ://plnkr.co/edit/sQaLts5xyGBjThjdQJwM

当我删除ng-if语句时，$ scope由select输入正确更新。 有人可以解释这种行为吗？

Answer 1

ng-if指令创建一个新的范围，该范围通常是从父范围继承的。 因此，您的ng-model =“ cityIds”将在此新范围中更新cityIds。

在父范围内使用一个对象，并从ng-model中引用该对象。

例如：

在您的控制器中，定义

$scope.data = {cityIds: null};

并从模板中参考

ng-model="data.cityIds"

这样可以确保您始终在处理父范围的数据。