2017-02-22 80 views
0

Я начинаю в Angularjs, и я хочу знать, где это поле определено в следующем коде Angular 1.3.0. Я использую зависимость ngMessages, откуда я взял этот код для формы на моей странице. Но я не могу понять, что такое поле здесь. Я имею в виду, я могу понять, на что это указывает (div справа внизу), но где именно мы установили отношение? Все, что я мог получить от Angular-messages.js, былогде поле определено в ng-model = "field"

«у нас есть текстовый ввод с именем myField, который привязан к полю переменной области с помощью директивы {@link ngModel ngModel}».

Так что я также зарегистрировал $ scope и не нашел ничего, связанного с полем. Пожалуйста, Кто-то объяснит мне, как это связано с 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> 
+0

https://docs.angularjs.org/api/ng/ директива/ngModel – Mistalis

+0

Вот мой весь код на [plunker] (https://plnkr.co/edit/oRj1rJRGclwcOscKq6xO?p=preview) – Ravy

ответ

0

нг-модель связывает HTML текстовое поле с angularjs контроллера, так что здесь

нг-модель связать значение текстового поля электронной почты с $ рамки.поле в контроллере, вот пример кода:

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

+0

Поскольку '$ scope.field' не установлен на входе при создании контроллера, ваш' console.log() 'будет печатать' undefined'. – Mistalis

1

Всякий раз, когда вы определяете любой ngModel в форме (HTML) без initiliazing в контроллере,

что ngModel стать частью $scope связанной с controller вашего шаблона.

В вашем случае его внешний вид ngModelfield не инициализирован в контроллере.

Но его часть $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 содержимое, то вы должны напечатать его в контроллере.

1

От ngModel docs:

директива ngModel связывает input, select, textarea (или контроль пользовательской формы ) к свойству на сферу с помощью NgModelController, который создан и подвергается этой директивой.


Когда вы пишете <input ng-model="field"/>, fields является переплетены в объем вашего контроллера ($scope.fields).

Если вы не инициализировали его в своем контроллере, fields, вероятно, undefined.

+0

Я только что добавил ссылку на мой код на [plunker] (https: // plnkr. сотрудничество/редактировать/oRj1rJRGclwcOscKq6xO? р = предпросмотр). Вы можете видеть, что там четко работает, и я инициализировал свой контроллер, но значение не определено. Вот в чем мой вопрос: почему это значение не определено, когда документы четко говорят, что привязаны к сфере моего контроллера. – Ravy