Question

我正在尝试将表单中的一些数据发送到控制器。用if包含在模板文件中。所以我的工作示例（没有ng-if）是：

查看

<form ng-submit="activate()">
    <div class="md-form-group">
        <input type="password" name="password" ng-model="input.password" required>
        <label>Password</label>
    </div>
    <button type="submit" class="btn primary btn-block p-x-md">Submit</button>
</form>

控制器

$scope.showDescription1 = false;
$scope.activate = function() {
    console.log($scope.input);
    return;
    ...
}

结果

这是我的期望......带有密码字段的模型对象。所以现在问题是：当我用ng-if包装所有视图时，console.log将写入undefined。

修改后的视图

<div ng-if="!showDescription1" class="m-b text-sm">
    <span>
        This is the second description...
    </span>

    <form ng-submit="activate()">
        <div class="md-form-group">
            <input type="password" name="password" ng-model="input.password" required>
            <label>Password</label>
        </div>
        <button type="submit" class="btn primary btn-block p-x-md">Submit</button>
    </form>
</div>

控制器

（没有变化）

结果

console.log调用将写入未定义的值。我不知道为什么，但ng-if声明正在清除我的模型？不过为什么呢？

Answer 1

当表达式ng-if被评估为ng-if="!showDescription1"时，

true会将元素附加到DOM，并在评估为“false＆＃39;”时删除该元素。因此，您的任何用户输入都将丢失。

对于您的情况，您需要使用不会重新呈现元素的ng-show或ng-hide，而是更改其display。因此用户输入仍然存在。

Answer 2

ng-if 在评估为true时创建自己的子范围。因此，您在console.log中登录的“input”的值位于由ng-if而不是控制器范围创建的新子范围内。角度文档here下面的描述解释了它：

请注意，使用ngIf删除元素时，其范围将被销毁并且在恢复元素时创建新范围。范围在ngIf中创建的，使用prototypal从其父作用域继承遗产。这是一个重要的含义，如果使用ngModel 在ngIf中绑定到父级中定义的javascript原语范围。在这种情况下，对变量内的任何修改子范围将覆盖（隐藏）父范围中的值。

现在，要使代码正常工作，请使用$ parent作为模型，如下所示：

 <div ng-if="!showDescription1" class="m-b text-sm">
   <span>
     This is the second description...
   </span>

<form ng-submit="activate()">
    <div class="md-form-group">
        <input type="password" name="password" ng-model="$parent.input.password" required>
        <label>Password</label>
    </div>
    <button type="submit" class="btn primary btn-block p-x-md">Submit</button>
</form>

Answer 3

尝试按照您的预期运作

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
  $scope.showDescription1 = false;
  $scope.activate = function() {
    console.log($scope.input);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
<div ng-if="!showDescription1" class="m-b text-sm">
    <span>
        This is the second description...
    </span>
  <form ng-submit="activate()">
    <div class="md-form-group">
        <label>Password</label>
        <input type="password" name="password" ng-model="input.password" required>
    </div>
    <button type="submit" class="btn primary btn-block p-x-md">Submit</button>
</form>
</div>
</div>

＆＃13;

使用ng-if清除模型查看表单surroundet

3 个答案: