【问题标题】:Two way databinding in angular jsangularjs中的两种方式数据绑定
【发布时间】:2017-11-17 16:33:10
【问题描述】:

我是 Angular js 的新手。我很困惑 angularjs 中的 2 路数据绑定是什么。假设在我的 mvc4 应用程序中,我已将模型与视图绑定,并且用户更改了与模型类属性绑定的文本框的值。

点击更新按钮后,模型将被改变的值传递给控制器​​。然后将值传递给数据库以更新数据库。即模型正在使用新值进行更新。

在我的 angularjs 应用程序中,我还将同一个文本框与模型绑定。要更新模型,用户将新值放入文本框并更改模型。新模型通过 web api 控制器传递来更新数据库。

我的问题是:这两种类型的绑定机制有什么区别。在这两种情况下,视图和模型都会更新。那么什么是angularjs中的2路绑定。请帮我理清这个概念。

【问题讨论】:

    标签: angularjs asp.net-mvc-4


    【解决方案1】:

    AngularJS 中的双向绑定是 viewmodel 之间的同步(无需刷新页面或点击按钮) .模型中的任何更改都会反映在视图上,视图中的任何更改都会反映在模型上。因此,这种双向绑定方式可确保您的视图和模型始终更新。此外,控制器可以与视图保持分离并专注于模型。

    这是在 AngularJS 中使用双向绑定的方法:

    <div ng-app="myApp" ng-controller="myCtrl">
        Name: <input ng-model="name">
        <h1>{{name}}</h1>
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "HelloWorld";
    });
    </script>
    

    MVC 使用 ASP.NET 模型绑定器。它将值从 HTML 页面映射到模型。当 MVC 接收到 HTTP 请求时,它会将其路由到控制器的特定操作方法。它根据路由数据中的内容确定要运行的操作方法,然后将 HTTP 请求中的值绑定到该操作方法的参数。 AngularJS 以不同的方式处理这个问题,因为控制器是在 &lt;div&gt; 中使用 ng-controller 标记指定的。此外,您不需要返回视图,模型会自动与控制器中关联的视图同步(无需返回)。

    您可以在此处找到有关 ASP.NET 模型绑定的更多信息:https://docs.asp.net/en/latest/mvc/models/model-binding.html

    【讨论】:

    • 谢谢。现在很清楚了。但是当我们在 mvc4 中绑定模型时,当我们更改视图与模型绑定时,模型也会发生变化。
    • @amitabha 我已经为 ASP.NET 模型绑定器添加了一个链接,希望对您有所帮助。
    【解决方案2】:

    双向数据绑定始终保持模型和视图同步,即模型的更改更新视图,视图的更改更新模型。

    • 绑定表达式会在模型更改时更新视图。
    • ng-model 指令在视图更改时更新模型。

    【讨论】:

      【解决方案3】:

      AngularJs 中的数据绑定有两种方式:一种是使用 Expression,另一种是使用 ngModel。 示例:<div> Your Name is <input type="text" ng-model="name" /> My name is {{name}} </div>

      这里 ng-model="name" 表示我们已经使用 ng-model 指令将 name 定义为角度变量,它将文本框的值设置为 name 变量并以 {{name}} 表达式显示。 这就是 AngularJS 的力量

      【讨论】:

      • 我明白这一点。但是根据文档“双向数据绑定是一个非常简单的概念,它提供模型和视图层之间的同步。模型更改传播到视图,视图更改会立即反映回来到模型。这使得模型成为维护应用程序状态的“单一事实来源”。同样的事情也适用于 mvc4。所以我的问题是有什么区别?
      猜你喜欢
      • 2016-02-27
      • 2012-10-28
      • 2014-02-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-11-29
      • 2011-11-17
      • 1970-01-01
      相关资源
      最近更新 更多