ng-model 没有在范围之外更新 [英] ng-model not being updated outside of the scope

问题描述

我将一个 ng-model 绑定到一个输入，但是它绑定到的变量的值没有在声明该指令的 div 之外更新:

<input id="date" type="text" ng-model="date" input-date><label for="date">日期</label>日期内部范围:{{date}}
日期外部范围:{{date}}

选择新日期时，仅更新内部 date.外层保留旧值(可能是 undefined 或不取决于我是否在控制器中声明它，这无关紧要).

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

这个是我使用的组件.

我尝试在控制器中将 date 声明为 $scope.date = new Date() 并且确实当前日期已加载到日期选择器中.However when a date is selected and the model changes, it's only updated locally (inner scope), while in the outer scope the old value remains.

解决方案

As ng-if 创建了一个子作用域，该子作用域在向 DOM 插入内部模板时原型继承自其当前作用域，因此在此case ng-model 在 ng-if 的子作用域内创建.因此，在创建 child 范围 时会发生什么，它携带 primitive 数据类型值 &reference(object) 数据类型值到子作用域，这就是为什么你可以看到外部作用域 date 在 ng-if 日期字段中获取值(只有第一次).但是当您更新 date 中的值时，您不会看到该值更新到外部范围.因为child scope 创建primitive type 值的方式不携带它们的引用，而对象则携带它们的引用.所以你可以创建一个像 $scope.model = {} & 这样的对象.然后在其中定义一个属性，这将起作用.因为对象带有对子作用域的引用，所以更新内部对象也会同步外部对象(它们都是相同的).此规则称为 Dot Rule，您可以通过它来解决问题.

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

<小时>

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

HTML

<input id="date" type="text" ng-model="vm.date" input-date><label for="date">日期</label>日期内部范围:{{vm.date}}
日期外部范围:{{vm.date}}

I am binding an ng-model to an input, but the value of the variable it's bound to is not being updated outside of the div where that directive is declared:

<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}}

When selecting a new date, ony the inner date is updated. The outer one remains with the old value (which might be either undefined or not depending if I declared it in the controller, it doesn't matter).

I am using angular-materialize, I am not sure if this is the source of the issue but it doesn't make sense because it is a specific framework for angular to work with the CSS framework materializecss.

This is the component I am using.

Edit:

I have tried declaring date in the controller as $scope.date = new Date() and indeed the current date is loaded in the date picker. However when a date is selected and the model changes, it's only updated locally (inner scope), while in the outer scope the old value remains.

解决方案

As ng-if creates a child scope which is Prototypically inherited from its current scope while inserting inner template to DOM, hence in this case ng-model getting created inside ng-if's child scope. So what happening is while creating a child scope it carries the primitive datatype values & reference(object) datatypes values to child scope, thats why you can see the outer scope date is getting value inside ng-if date field(only first time). But when you update the value in date you will not see the value gets updated to outer scope. Because the way child scope has create primitive type value not carry their references, where as objects are carried with their references. So you can create a object like $scope.model = {} & then define a property into it, that will work. Because object are carried with their references to child scope, updating inner object would sync the outer object as well(they both are same). This rule is called as Dot Rule by which you can fix your issue.

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

---

More convenient way to avoid such kind of scope hierarchy is using controllerAs pattern while using controller on HTML. In this case you shouldn't be using $scope instead you will bind all the properties to controller function context (this). Thereafter when using controller you can use alias of controller to get the values of controller like ng-controller="myCtrl as vm"(here vm is alias of controller which has all information binding to 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}}

这篇关于ng-model 没有在范围之外更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！