Что такое двусторонняя привязка данных в угловом

Question

Я новичок, пытающийся понять угловую привязку данных в двух направлениях. В документах https://docs.angularjs.org/guide/databinding в нем упоминается «Любые изменения в представлении сразу отражаются в модели, и любые изменения в модели распространяются на представление». Поэтому, если есть поле ввода (модель) и выражение (представление), я вижу, что «и любые изменения в модели распространяются на представление», но я хочу увидеть пример противоположного сценария, т. Е. «Любые изменения в представлении сразу отражаются в модели», и как я могу продемонстрировать это сам. Любая помощь будет высоко оценена. Спасибо

Answer 1

В этом базовом примере angularjs мы используем директиву ng-model. Он имеет двустороннюю привязку данных ($ scope -> view и view -> $ scope). $ Scope - объект, который поддерживает массив $$ наблюдателей для каждого связанного с ним объекта, и каждый объект в этом массиве имеет ключ 'last', который сохраняет последнее обновленное значение в модели.

<div ng-app> 
    <div> 
    <label>Name:</label> 
    <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
    <hr> 
    <h1>Hello {{yourName}}!</h1> 
    </div> 
</div> 

В этом случае модель «yourName» связана с $ scope. Так, angularjs внутренне выглядит для изменения этой модели, используя $ часы и цикл дайджеста обновленное все изменения сразу к просмотру

$watch(watchExpression, listener, [objectEquality]);//Registers a listener callback to be executed whenever the watchExpression changes. 
$digest();//Processes all of the watchers of the current scope and its children. 

Вы также можете посмотреть на изменения в модели вашего углового контроллера как

$scope.$watch('yourName',function(){ 
    //do your stuff when the model changes 
}); 

вы увидите, что если изменить вид вашего т.е. InputBox, модель определена в нг-модели изменяется, и эта измененная модель отражает обратно в представление.

Answer 2

См этому рабочему коду JsFiddle

$ часов будет наблюдать переменную (нг-модель) для любых изменений в этом случае и вызывает функцию. Даже не добавляя $ watch, все, что вы вводите в поле ввода, автоматически обновляется в бэкэнд. $ watch - это один из способов проверить правильность обновления модели.

При нажатии кнопки «Вход» в контроллере будет отображаться последнее значение модели.

$scope.$watch('user.firstName',function(){ 
     alert("Your name is changed to : "+$scope.user.firstName); 
    });