Question

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

选择新日期时，内部date会更新。外部值保留旧值（可能是undefined或者不是取决于我是否在控制器中声明它，它没关系。）

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

This是我正在使用的组件。

编辑：

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

Answer 1

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

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

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

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

Answer 2

像ngIf指令一样的{p> ngRepeat创建了自己的$scope。

因此，在这种特定情况下，您可以使用ng-show代替ng-if。

来自docs：

ngIf指令删除或重新创建DOM树的一部分基于{表达式}。如果分配给ngIf的表达式求值如果为false，则从DOM中删除该元素，否则为a 将元素的克隆重新插入DOM。

示例：

angular.module('app', []) .controller('mainCtrl', function($scope) { $scope.testa = false; $scope.testb = false; $scope.testc = false; $scope.testd = false; });

<!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> </head> <body ng-controller="mainCtrl"> Test A: {{testa}} <br /> Test B: {{testb}} <br /> Test C: {{testc}} <br /> Test D: {{testd}} <br /> <div> testa (without ng-if): <input type="checkbox" ng-model="testa" /> </div> <div ng-if="!testa"> testb (with ng-if):  <input type="checkbox" ng-model="$parent.testb" /> </div> <div ng-show="!testa"> testc (with ng-show): <input type="checkbox" ng-model="testc" /> </div> <div ng-hide="testa"> testd (with ng-hide): <input type="checkbox" ng-model="testd" /> </div> </body> </html>

Answer 3

绑定到ngModel时，您应该使用具有属性的对象。

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

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

3 个答案: