Как работает привязка данных в AngularJS?

Question

Как работает привязка данных в AngularJS framework?

Я не нашел технических подробностей на их сайте .Более или менее понятно, как это работает, когда данные распространяются от вида к модели.Но как AngularJS отслеживает изменения свойств модели без сеттеров и геттеров?

Я обнаружил, что существуют наблюдатели JavaScript , которые могут выполнять эту работу.Но они не поддерживаются в Internet Explorer 6 и Internet Explorer 7 .Так как же AngularJS узнает, что я изменил, например, следующее и отразил это изменение в виде?

myobject.myproperty="new value";

Answer 1

AngularJs поддерживает Двустороннее связывание данных .
Означает, что вы можете получить доступ к данным Вид -> Контроллер & Контроллер -> Вид

Например: 1011 *

1)

// If $scope have some value in Controller. 
$scope.name = "Peter";

// HTML
<div> {{ name }} </div>

O / P

Peter

Вы можете связать данные в ng-model Как: -
2)

<input ng-model="name" />

<div> {{ name }} </div>

Здесь, в приведенном выше примере, все, что даст пользователь ввода, будет видно в теге <div>.

Если вы хотите привязать ввод из html к контроллеру: -
3)

<form name="myForm" ng-submit="registration()">
   <label> Name </lbel>
   <input ng-model="name" />
</form>

Здесь, если вы хотите использовать вход name в контроллере, тогда

$scope.name = {};

$scope.registration = function() {
   console.log("You will get the name here ", $scope.name);
};

ng-model связывает наше представление и отображает его в выражении {{ }}.
ng-model - это данные, которые отображаются пользователю в представлении и с которыми пользователь взаимодействует.
Так что связать данные в AngularJs легко.

Answer 2

Вот пример привязки данных с AngularJS, используя поле ввода.Позже я объясню

HTML-код

<div ng-app="myApp" ng-controller="myCtrl" class="formInput">
     <input type="text" ng-model="watchInput" Placeholder="type something"/>
     <p>{{watchInput}}</p> 
</div>

AngularJS-код

myApp = angular.module ("myApp", []);
myApp.controller("myCtrl", ["$scope", function($scope){
  //Your Controller code goes here
}]);

Как вы можете видеть наНапример, AngularJS использует ng-model для прослушивания и просмотра того, что происходит с элементами HTML, особенно с полями input.Когда что-то случится, сделай что-нибудь.В нашем случае ng-model привязывается к нашему виду, используя обозначение усов {{}}.Все, что введено в поле ввода, отображается на экране мгновенно.И в этом прелесть связывания данных, используя AngularJS в его простейшей форме.

Надеюсь, это поможет.

См. Рабочий пример здесь по Codepen

Answer 3

Angular.js создает наблюдатель для каждой модели, которую мы создаем. Всякий раз, когда модель изменяется, к модели добавляется класс «ng-dirty», поэтому наблюдатель будет наблюдать за всеми моделями, имеющими класс «ng-dirty», и обновлять их значения в контроллере и наоборот.

Answer 4

привязка данных:

Что такое привязка данных?

Всякий раз, когда пользователь изменяет данные в представлении, происходит обновление этого изменения в модели объема и наоборот.

Как это возможно?

Краткий ответ: С помощьюсправка по циклу дайджеста.

Описание: Angular js устанавливает наблюдатель на модель области, которая запускает функцию слушателя, если в модели есть изменения.

$scope.$watch('modelVar' , function(newValue,oldValue){

// Код обновления Dom с новым значением

});

Так когда и как вызывается функция наблюдателя?

Функция наблюдателявызывается как часть цикла дайджеста.

Цикл дайджеста вызывается автоматически, как часть угловых js, встроенных в директивы / сервисы, такие как ng-модель, ng-bind, $ timeout, ng-click и другие ..., которыеПозволяет запустить цикл дайджеста.

Функция цикла дайджеста:

$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope 

т.е. $rootScope.$apply()

Примечание: $ apply () - эторавно $ rootScope. $ digest () это означает, что грязная проверка начинается прямо с корня или вершины или родительской области до всех дочерних областей $ в приложении angular js.

Указанные выше функции работают вбраузеры IE для упомянутых версий также просто убедившись, что ваше приложение является angular js, что означает, что вы используете файл сценария фреймворка angularjs, указанный в теге script.

Спасибо.