javascript - ng-model 未在范围之外更新

Question

我将 ng-model 绑定(bind)到输入，但它所绑定(bind)的变量的值不会在声明该指令的 div 之外更新:

<div input-field
     ng-if="startTypes.selected.value == 'LocalDate' || startTypes.selected.value == 'LocalDateTime'">
  <input id="date" type="text" ng-model="date" input-date>
  <label for="date">Date</label>
  Date inner scope: {{date}}
</div>
Date outer scope: {{date}}

选择新日期时，仅更新内部日期。外部值保留旧值(可能是未定义或不取决于我是否在 Controller 中声明它，这并不重要)。

我正在使用angular-materialize ，我不确定这是否是问题的根源，但这没有意义，因为它是 Angular 与 CSS 框架一起使用的特定框架 materializecss .

This是我正在使用的组件。

编辑:

我尝试在 Controller 中将date声明为$scope.date = new Date()，并且当前日期确实已加载到日期选择器中。但是，当选择日期并且模型发生更改时，它仅在本地更新(内部范围)，而在外部范围中旧值仍然保留。

Answer 1

由于ng-if创建了一个子作用域，该子作用域在将内部模板插入到DOM时典型地继承自当前作用域，因此在这种情况下ng-model在内部创建ng-if 的子作用域。因此，在创建子作用域时，它会将原始数据类型值和引用(对象)数据类型值传递给子作用域，这就是为什么你可以看到外部范围 date 在 ng-if 日期字段中获取值(仅第一次)。但是，当您更新 date 中的值时，您将不会看到该值更新到外部范围。因为子作用域创建原始类型值的方式不携带它们的引用，而对象则带有它们的引用。因此，您可以创建一个像 $scope.model = {} 这样的对象，然后在其中定义一个属性，这样就可以了。因为对象带有对子作用域的引用，所以更新内部对象也会同步外部对象(它们都是相同的)。此规则称为点规则，您可以通过它来解决您的问题。

$scope.model = {};
$scope.model.date = new Date();

<小时/>

避免这种范围层次结构的更方便的方法是在 HTML 上使用 Controller 时使用 controllerAs 模式。在这种情况下，您不应使用 $scope，而是将所有属性绑定(bind)到 Controller 函数上下文 (this)。此后，在使用 Controller 时，您可以使用 Controller 的 alias 来获取 Controller 的值，例如 ng-controller="myCtrl as vm"(此处为 vm是 Controller 的别名，它具有绑定(bind)到 this 的所有信息)

HTML

<div input-field
     ng-if="vm.startTypes.selected.value == 'LocalDate' || vm.startTypes.selected.value == 'LocalDateTime'">
  <input id="date" type="text" ng-model="vm.date" input-date>
  <label for="date">Date</label>
  Date inner scope: {{vm.date}}
</div>
Date outer scope: {{vm.date}}