Question

我是Angularjs的初学者，我想知道以下Angular 1.3.0代码中字段的定义。我正在使用依赖项ngMessages，我已将此代码用于我的页面上的表单。但是我无法理解这里指的是什么字段。我的意思是，我可以弄清楚它指向的是什么（它下方的div）但我们究竟在哪里建立了这种关系？我从Angular-messages.js得到的只是

“我们有一个名为myField的文本输入，它使用{@link ngModel ngModel}指令绑定到范围变量字段。”

所以我也记录了$ scope，发现没有与field相关的内容。请有人解释一下它与下面的div有什么关系。

<form name="myForm">
  <label>
      Enter text:
      <input type="email" ng-model="field" name="myField" required maxlength="15" />
  </label>
  <div ng-messages="myForm.myField.$error" role="alert">
      <div ng-message="required">Please enter a value for this field.</div>
      <div ng-message="email">This field must be a valid email address.</div>
      <div ng-message="maxlength">This field can be at most 15 characters long.</div>
   </div>
</form>

Answer 1

每当您在窗体中定义任何ngModel而不在控制器中初始化它时，

ngModel成为与您的模板的$scope相关联的controller的一部分。

在您的情况下，您的ngModel field似乎未在控制器中初始化。

但它是映射控制器$scope的一部分。

<input type="email" ng-model="field" name="myField" required maxlength="15" />

此处name和ngModel相同。

在角度形式中，您可以使用表单名称访问input control。

myForm.myField //your_form_name.form_field_name

如果要查看$scope内容，则应将其打印在控制器中。

Answer 2

来自ngModel docs：

ngModel指令绑定input，select，textarea（或自定义表单）使用NgModelController来控制范围内的属性由该指令创建和公开。

当您撰写<input ng-model="field"/>时，fields被绑定到您的控制器的范围（$scope.fields）。

如果您未在控制器中初始化它，fields可能是undefined。

Answer 3

ng-model使用angularjs控制器绑定html文本字段，所以这里

ng-model将电子邮件文本字段的值与控制器中的$ scope.field绑定，下面是示例代码：

html代码：

<html ng-app="myApp">
 <div data-ng-controller="your-controller">
 <form name="myForm">
  <label>
    Enter text:
   <input type="email" ng-model="field" name="myField" required        maxlength="15" />
  </label>
  <div ng-messages="myForm.myField.$error" role="alert">
    <div ng-message="required">Please enter a value for this field.</div>
    <div ng-message="email">This field must be a valid email address.</div>
    <div ng-message="maxlength">This field can be at most 15 characters long.</div>
  </div>
  </form>
 </div>
</html>

控制器代码：

var myApp=angular.module('myApp'); myApp.controller('your-controller',function($scope){ console.log($scope.field); });

其中是在ng-model =“field”中定义的字段

3 个答案: