javascript - 文本区域上的 ng-model 不起作用

Question

我在使用 ng-model 时遇到问题。当我查看该对象时，所有属性都是空的:

$scope.edit = {
            name: " ",
            gender: " ",
            major: " ",
            gpa: " ",
            act: " ",
            sat: " ",
            toefl: " ",
            primary: " ",
            secondary: " ",
            country: " ",
            summary: " ",
            past: " ",
            media: " "
        };

但是当我单击提交按钮时，它返回的所有内容都是

在html页面中

代码:https://plnkr.co/edit/HJlfFVjq0cZWJDCDXSXw?p=preview

Answer 1

从plunker(虽然我无法运行你的代码)来看，很明显的是你在表单中的两个不同场合使用了相同的 Controller PlayerController。

What happens here is that the method updateUser() of the ng-click attribute is bound to a new instance of the controller PlayerController. Therefore creating a new scope, and totally unaware of what changes have been brought to its neighboring namesake controller's scope properties (in this case edit).

<div ng-controller="PlayerController">
   <!-- ISOLATE region -->
   <textarea ng-model="edit.someproperty"></textarea>
</div>
<div ng-controller="PlayerController">
   <!-- Another isolate region unaware of the above -->
   <button ng-click="updateUser(edit)">Update</button>
</div>

解决方案

将您的整个表单封装在一个 ngController 指令中，以便该范围内的所有内容(ngModel 指令和方法 updateUser)使用相同的范围属性。

Simple Demo

注意:我还注意到您已将 ngController 包装在 form 中，其中是不正确的。 AngularJS 中的 form 强加了一个 FormController Controller 对象，并且该 Controller 成为 Controller 的直接父级。事实上，您使用 ngController 创建的 Controller 旨在处理表单的逻辑，而不是其他方式。