双向绑定仅表示：

Question

我是一个尝试理解角度双向数据绑定的新手。在文档https://docs.angularjs.org/guide/databinding中，它提及＆＃34;对视图的任何更改都会立即反映在模型中，并且模型中的任何更改都会传播到视图＆＃34;。因此，如果有输入框（模型）和表达式（视图），我可以看到＆＃34;并且模型中的任何更改都会传播到视图＆＃34;但是我希望看到相反场景的一个例子，即，＆＃34;对视图的任何更改都会立即反映在模型中，并且我如何能够自己展示它。任何帮助都会受到高度关注。感谢

Answer 1

双向绑定仅表示：

当模型中的属性更新时，UI也会更新。
当UI元素更新时，更改会传播回模型。

Also more

Answer 2

请参阅此工作代码JsFiddle

$ watch会在这种情况下观察变量（ng-model）的任何变化并调用该函数。即使不添加$ watch，输入框中输入的内容也会自动在后端更新。 $ watch是检查模型是否正确更新的一种方法。

单击“登录”按钮，控制器中将显示最新的型号值。

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

Answer 3

在angularjs的这个基本示例中，我们使用指令ng-model。它具有双向数据绑定（$ scope - ＆gt; view和view - ＆gt; $ scope）。$ scope是一个对象，它为每个绑定到它的对象维护一个数组$$观察者，并且该数组中的每个对象都有一个键'last'，用于存储模型中最后更新的值。

    Dim oPropSets As PropertySets
    oPropSets = oDoc.PropertySets
    Dim oPropSet As PropertySet
    For Each oPropSet In oPropSets
        Dim oPartProp As Inventor.Property
        For Each oPartProp In oPropSet
            Dim oPropertyValue As Object
            If oPartProp.Value Is Nothing Then
                'NullValue-Properties are ignored
            ElseIf oPartProp Is Nothing Then
                   'Null-Properties are ignored too
            ElseIf System.String.Equals(oPartProp.Value.ToString.Trim, "") Then
            'Properties with empty values are also ignored
            Else
                'And here you have your Property:
                Debug.Print(oPartProp.Name & "=" & oPartProp.Value.ToS5tring & vbLf)
            End If
        Next
    Next

在这种情况下，“yourName”模型与$ scope绑定。因此，angularjs使用$ watch在内部查找此模型的更改，并且摘要周期立即将所有更改更新到视图

<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>

您还可以在角度控制器中查找模型中的更改

 $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.

您会看到，如果您更改视图，即输入框，则更改ng-model中定义的模型，并且此更改的模型会反映回视图。

Answer 4

角度数据双向绑定：

它帮助用户将数据从组件传递到视图，并从视图传递到组件。因此将建立“双向通信”。

这可以通过[（ngModel）]来实现，也称为“香蕉盒语法”，请在下面参考该代码段以供使用：

import { Component } from '@angular/core'; 
 @Component({ 
   selector: 'app-example', 
   template: ` 
               Enter the value  : <input [(ngModel)] ='val'> 
               <br> 
                Entered value is:  {{val}} 
             ` 
}) 
export class AppComponent { 
   val: string = ''; 
}

将FormsModule导入app.module.ts中，以避免在使用ngModel时发生模板解析错误：

    import { FormsModule } from "@angular/forms"; 
    import { BrowserModule } from '@angular/platform-browser'; 
    import { AppComponent } from './app.component'; 
     @NgModule({ 
       imports: [BrowserModule, FormsModule], 
       declarations: [ AppComponent], 
       bootstrap: [AppComponent] 
    }) 

export class AppModule { }

我希望这很清楚。

什么是角度的双向数据绑定

4 个答案:

双向绑定仅表示：