javascript – ng-model没有在范围之外更新

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – ng-model没有在范围之外更新，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2011字，纯文字阅读大概需要3分钟。

内容图文

我将ng-model绑定到一个输入,但是它所绑定的变量的值不会在声明该指令的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}}

选择新日期时,内部日期会更新.外部的一个保留旧值(可能是未定义或不依赖,如果我在控制器中声明它,它无关紧要).

我使用的是angular-materialize,我不确定这是否是问题的根源,但它没有意义,因为它是一个特定的框架,用于处理CSS框架materializecss.

This是我正在使用的组件.

编辑：

我已尝试在控制器中声明日期为$scope.date = new Date(),实际上当前日期已加载到日期选择器中.但是,当选择日期并且模型更改时,它仅在本地更新(内部范围),而在外部范围中,旧值保留.

解决方法:

由于ng-if创建了一个子范围,它在将内部模板插入DOM时从原型范围继承原型,因此在这种情况下,ng-model将在ng-if的子范围内创建.那么在创建子范围时发生的事情是它带有原始数据类型值& reference(object)数据类型值到子范围,这就是为什么你可以看到外部范围日期是在ng-if日期字段中获取值(仅第一次).但是当您更新日期值时,您将看不到值更新到外部范围.因为子作用域创建基本类型值的方式不带有它们的引用,所以当对象随其引用一起携带时.所以你可以创建一个像$scope.model = {}&的对象.然后在其中定义一个属性,这将起作用.因为对象是通过对子作用域的引用来携带的,所以更新内部对象也会同步外部对象(它们都是相同的).此规则称为“点规则”,您可以通过该规则修复问题.

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

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

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

内容总结

以上是互联网集市为您收集整理的javascript – ng-model没有在范围之外更新全部内容，希望文章能够帮你解决javascript – ng-model没有在范围之外更新所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端