使用ng-if

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不会更新。

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

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

Answer 1

ng-if指令创建一个原型继承自父作用域的新作用域。因此，你的ng-model =“cityIds”正在更新这个新范围内的cityIds。

使用父作用域中的对象并参考ng-model中的对象。

例如：

在你的控制器中，定义

$scope.data = {cityIds: null};

，并参考模板

ng-model="data.cityIds"

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