ng-model没有在范围之外更新 [英] ng-model not being updated outside of the scope
问题描述
我将 ng-model 绑定到输入，但是绑定到的变量的值不会在 div之外更新声明该指令的位置：
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}}
选择新日期时，可以使用内部日期已更新。外部值保留旧值（可能是 undefined 或者不依赖于我是否在控制器中声明它，它没关系。）
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).
我正在使用 angular-materialize ，我不是确定这是否是问题的根源，但它没有意义，因为它是一个特定的角度框架，可以使用CSS框架 materializecss 。
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.
编辑：
我试过声明 date 在控制器中作为 $ scope.date = new Date（），实际上当前日期加载在日期选择器中。但是，当选择日期并且模型更改时，它仅在本地更新（内部范围），而在外部范围中，旧值仍然存在。
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.
推荐答案
作为 ng-if 创建一个子范围，它在将内部模板插入DOM时从原型范围继承原型，因此在这种情况下 ng-model 在 ng-if 的子范围内创建。那么在创建一个子范围时会发生什么呢？它带有原始数据类型值& 引用（对象）数据类型到子范围的值，这就是为什么你可以看到外部范围日期正在获取值 ng-if 日期字段（仅限第一次）。但是当您更新 date 中的值时，您将看不到值更新到外部范围。因为子范围的方式创建基本类型值不带有引用，其中对象随其引用一起携带。因此，您可以创建一个对象，例如 $ scope.model = {} &然后在其中定义一个属性，这将起作用。因为对象是通过对子作用域的引用来携带的，所以更新内部对象也会同步外部对象（它们都是相同的）。此规则称为点规则，您可以通过该规则解决问题。
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();
避免此类范围层次结构的更方便的方法在HTML上使用控制器时使用 controllerAs 模式。在这种情况下，您不应该使用 $ scope 而是将所有属性绑定到控制器函数上下文（ this ）。此后使用控制器时，您可以使用控制器的 alias 来获取控制器的值，如 ng-controller =myCtrl as vm（此处 vm 是控制器的别名，其所有信息都绑定到此）
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屋！
