GVKun编程网logo

AngularJS学习笔记（三）数据双向绑定的简单实例（angularjs 双向绑定原理）

10

如果您对AngularJS学习笔记感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于AngularJS学习笔记的详细内容，我们还将为您解答三数据双向绑定的简单实例的相关问题，并

如果您对AngularJS学习笔记感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于AngularJS学习笔记的详细内容，我们还将为您解答三数据双向绑定的简单实例的相关问题，并且为您提供关于AngularJS 双向数据绑定详解简单实例、AngularJS _AngularJs 双向绑定原理(数据绑定机制)、AngularJS 双向数据绑定详解简单实例、AngularJS 学习笔记 （四） 基本概念和用法 之 双向数据绑定的有价值信息。

本文目录一览：

AngularJS学习笔记（三）数据双向绑定的简单实例（angularjs 双向绑定原理）

AngularJS学习笔记（三）数据双向绑定的简单实例（angularjs 双向绑定原理）

双向绑定

双向绑定是AngularJS最实用的功能，它节省了大量的代码，使我们专注于数据和视图，不用浪费大量的代码在Dom监听、数据同步上，关于双向更新，可看下图：

数据-->视图

这里我们只演示有了数据以后，如何绑定到视图上。

<!DOCTYPE html>

<html ng-app="App">
<head>
  <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
  <script type="text/javascript">

  var App = angular.module("App", []);

  App.controller("ctrl", function ($scope) {
      
       $scope.username=''张三''
      
        $scope.changename=function(){
          $scope.username=''李四'';  
        }
    });
    
  </script>
</head>
  <body>
    <div ng-controller ="ctrl">
      <buttonbtn btn-primary'' ng-click=''changename();''>
        username=''李四''
      </button>
      <!--页面加载初期，用户可能会看到绑定的表达式-->
      <div>{{username}}</div>
      <!--此绑定不会出现上述情况-->
      <div ng-bind=''username''></div>
    </div>
  </body>
</html>

点击按钮之后，div内容变成 李四，效果如图：

视图—>数据

上个例子，我们看了数据变化后，视图也会自动变化。那么这个例子则是反过来，视图变化，导致数据也跟着变化，那么数据变化后，我们如何知道呢，这儿我们可以通过另外一个元素将数据再显示出来。

<!DOCTYPE html>

<html ng-app="App">
<head>
  <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
  <script type="text/javascript">

  var App = angular.module("App", []);

  App.controller("ctrl", function ($scope) {
      
       $scope.username=''张三''
    });
    
  </script>
</head>
  <body>
    <div ng-controller ="ctrl">
      <input type=''text'' ng-model=''username'' />
      
      <div>{{username}}</div>
    </div>
  </body>
</html>

查看效果：

实现机制

angular对常用的dom事件，xhr事件等做了封装， 在里面触发进入angular的digest流程。

在digest流程里面， 会从rootscope开始遍历， 检查所有的watcher。

您可能感兴趣的文章:
  • javascript实现数据双向绑定的三种方式小结
  • Vue.js每天必学之数据双向绑定
  • 轻松实现javascript数据双向绑定
  • 深入学习AngularJS中数据的双向绑定机制
  • 浅谈AngularJs 双向绑定原理(数据绑定机制)
  • Vue.js第一天学习笔记（数据的双向绑定、常用指令）
  • 深入理解Angularjs向指令传递数据双向绑定机制
  • JS原生数据双向绑定实现代码
  • 实例剖析AngularJS框架中数据的双向绑定运用
  • js实现数据双向绑定(访问器监听)

AngularJS 双向数据绑定详解简单实例

AngularJS 双向数据绑定详解简单实例

angular的双向数据绑定，个人理解是，通过model建立数据模型，那么视图上的数据就会对应存储在angular程序里，视图上的数据变化会同步到model，model的数据改变也会同步到视图。

下面的demo演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hello, AngularJS!</title>
  <script src="angular.js"></script>
</head>
<body>
  <div ng-app>
    <!-- ng-model指令将表单的value绑定到model的username变量-->
    <input ng-model="username" type="text" placeholder="请输入...">
    <p>Hello, <strong>{{username}}</strong>!</p>
  </div>
</body>
</html>

运行结果：程序运行后，在输入框输入文字，下面会与输入框内容同步变化。是不是很惊奇！以前需要写一大段js代码的事情（监听onchange事件，将input的value赋给下面的strong元素），现在只用一个ng-model指令就完成了。Perferct!

案例详解：

1. ng-model指令的作用：建立数据模型，在模型中对应有一个变量username用来存放input元素的value；

2. {{username}}是一个表达式，angular会自动计算该表达式，替换成相应的值。

3. 手动输入文字，input元素的value发生变化，自动同步到model的usename变量，{{username}}是从模型中读username的值，因此下面strong元素的内容跟着变了。

同步数据是angular帮我们完成的。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:
  • javascript实现数据双向绑定的三种方式小结
  • AngularJS学习笔记（三）数据双向绑定的简单实例
  • JS原生数据双向绑定实现代码
  • Angular JS数据的双向绑定详解及实例
  • JavaScript中双向数据绑定详解
  • jQuery实现html双向绑定功能示例
  • js最简单的双向绑定实例讲解

AngularJS _AngularJs 双向绑定原理(数据绑定机制)

AngularJS _AngularJs 双向绑定原理(数据绑定机制)

原文地址：

https://www.jianshu.com/p/ad0c48810bf1

 

AngularJs 为 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发。$digest 会遍历所有的 $watch。从而更新DOM。

$watch

这有点类似于我们的观察者模式，在当前作用域$scope下，我们创建一个监控器$watchers和一个监听器$watch，$watchers 负责管理所有的 $watch，当我们每次绑定到UI上的时候就自动创建一个$watch，并把它放到 $watchers。

controller.js

app.controller('MainCtrl', function($scope) {
    • $scope.Hello = "Hello";
    • $scope.world = "World";
    • });

    index.html

    1. <div>{{Hello}}</div>

    这里，即便我们在$scope上添加了两个变量，但是只有一个绑定在了UI上，因此在这里只生成了一个$watch

    $digest

    当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发。$digest将会遍历我们的$watch，如果$watch没有变化，这个循环检测就将停止，如果有至少一个更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。这就是脏检查(Dirty Checking)机制

    controller.js

    1. app.controller('MainCtrl', function() {
    2. $scope.name = "Foo";
    4. $scope.changeFoo = function() {
    5. $scope.name = "Bar";
    6. }
    7. });

    index.js

    1. <div>{{ name }}</div>
    2. <button ng-click="changeFoo()">Change the name</button>
    • 当我们按下按钮
    • 浏览器接收到一个事件，进入angular context。
    • $digest循环开始执行，查询每个$watch是否变化。
    • 由于监视$scope.name的$watch报告了变化，它会强制再执行一次$digest循环。
    • 新的$digest循环没有检测到变化。
    • 更新与$scope.name新值相应部分的DOM。

    $apply

    $apply 我们可以直接理解为刷新UI。如果当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入，之后的$digest检测机制就不会触发

    1. app.directive('clickable', function() {
    2. return {
    3. restrict: "E",
    4. scope: {
    5. foo: '='
    6. },
    7. template: '<ul><li>{{foo}}</li></ul>',
    8. link: function(scope, element, attrs) {
    9. element.bind('click', function() {
    10. scope.foo++;
    11. console.log(scope.foo);
    12. });
    13. }
    14. }
    15. });

    当我们调用clickable指令的时候，我们可以看到foo的值增加了，但是界面上显示的内容并没有改变。$digest脏检测机制没有触发，检测foo的$watch就没有执行。

    $apply()方法的两种形式

    1) 无参

    $scope.$apply();

     

    1. element.bind('click', function() {
    2. scope.foo++;
    3. //if error
    4. scope.$apply();
    5. });

    当我们使用这种形式的时候，如果在scope.$apply之前程序发生异常，那scope.$apply没有执行，界面就不会更新

    2) 有参

    1. $scope.$apply(function(){
    2. ...
    3. })

     

    1. element.bind('click', function() {
    2. scope.$apply(function() {
    3. scope.foo++;
    4. });
    5. })

    如果用这种形式，即使后面的发生异常，数据还是会更新。

    在 AngularJS 中使用 $watch

    常用的使用方式：

    1. $scope.name = 'Hello';
    2. $scope.$watch('name', function(newValue, oldValue) {
    3. if (newValue === oldValue) { return; }
    4. $scope.updated++;
    5. });

    传入到$watch()中的第二个参数是一个回调函数，该函数在name的值发生变化的时候会被调用。

    如果要监听的是一个对象，那还需要第三个参数：

    1. $scope.data.name = 'Hello';
    2. $scope.$watch('data', function(newValue, oldValue) {
    3. if (newValue === oldValue) { return; }
    4. $scope.updated++;
    5. }, true);

    表示比较的是对象的值而不是引用，如果不加第三个参数true，在 data.name 变化时，不会触发相应操作，因为引用的是同一引用。

    总结

    1) 只有在$scope变量绑定到页面上，才会创建 $watch

    2) $apply决定事件是否可以进入angular context

    3) $digest 循环检查model时最少两次，最多10次(多于10次抛出异常，防止无限检查)

    4) AngularJs自带的指令已经实现了$apply，所以不需要我们额外的编写

    5) 在自定义指令时，建议使用带function参数的$apply



    作者：Nickyzhang
    链接：https://www.jianshu.com/p/ad0c48810bf1
    來源：简书
    简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

    AngularJS 双向数据绑定详解简单实例

    AngularJS 双向数据绑定详解简单实例

    angular的双向数据绑定，个人理解是，通过model建立数据模型，那么视图上的数据就会对应存储在angular程序里，视图上的数据变化会同步到model，model的数据改变也会同步到视图。

    下面的demo演示：

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>hello, AngularJS!</title>
  <script src="angular.js"></script>
</head>
<body>
  <div ng-app>
    <!-- ng-model指令将表单的value绑定到model的username变量-->
    <input ng-model="username" type="text" placeholder="请输入...">
    <p>Hello, <strong>{{username}}</strong>!</p>
  </div>
</body>
</html>
    登录后复制

    运行结果：程序运行后，在输入框输入文字，下面会与输入框内容同步变化。是不是很惊奇！以前需要写一大段js代码的事情（监听onchange事件，将input的value赋给下面的strong元素），现在只用一个ng-model指令就完成了。Perferct!

    201611011003251.png

    案例详解：

    1. ng-model指令的作用：建立数据模型，在模型中对应有一个变量username用来存放input元素的value；

    2. {{username}}是一个表达式，angular会自动计算该表达式，替换成相应的值。

    3. 手动输入文字，input元素的value发生变化，自动同步到model的usename变量，{{username}}是从模型中读username的值，因此下面strong元素的内容跟着变了。

    同步数据是angular帮我们完成的。

    AngularJS 学习笔记 （四） 基本概念和用法 之 双向数据绑定

    AngularJS 学习笔记 （四） 基本概念和用法 之 双向数据绑定

    1、取值表达式与ng-bind指令

        

    2、双向数据绑定的经典才场景 -- 表单

        html代码：

        

        form.js代码:

        

    运行效果1：原始显示效果，并点击按钮1

        

       运行效果2：点击测试02按钮后，再点击测试01按钮查看控制台信息。

        

    PS：请看，这里视图发生了变化，是由数据模型改变而改变的。

    运行效果3：点击测试03重置按钮后，再点击测试01查看控制台信息。

        

    运行效果4：输入其他的信息，Model发生变化。

        

        PS：这里就是双向数据绑定。

    3、动态切换css标签样式

        3.1 切换CSS样式的方法之一

        html代码：

        

        css样式：

           

        JS代码：

        

        效果图，点击前后：

            

        PS：动手敲敲代码，感觉越来越熟练了。

         3.2 切换CSS样式的方法之二 ng-class （推荐）

        html代码：

        

        CSS代码:

        

        JS代码：

        

        运行效果1：初始状态

        

        运行状态2：点击Simulate Error

        

        运行状态3：点击Simulate Warning

        

        PS：查看文档ng-class的用法之二

        
     

    4、ng-show和ng-hide

        html代码：

        

        JS代码：

        

        运行效果1：初始状态

        

        运行效果2：点击按钮后

        

    PS：ng-show 和 ng-hide的用法是控制其的布尔值，由AngularJS判断是否显示。

    5、ngAnimate

        PS：好懒了直接说话。

    1. 依赖模块加入 ngAnimate 比如：var MyApp = angular.module("Myapp",["ngAnimate"]);
    2. 使用：在*.CSS中增加使用.ng-center 和 .ng-leave（当进入时 和 离开时）
    3. 具体使用：需要和前面的类连起来用，不能有空格。
    4. 例子：  .hello.ng-leave{index:9999;}。不能写成.hello .ng-enter。

    今天关于AngularJS学习笔记和三数据双向绑定的简单实例的分享就到这里，希望大家有所收获，若想了解更多关于AngularJS 双向数据绑定详解简单实例、AngularJS _AngularJs 双向绑定原理(数据绑定机制)、AngularJS 双向数据绑定详解简单实例、AngularJS 学习笔记 （四） 基本概念和用法 之 双向数据绑定等相关知识，可以在本站进行查询。

    本文标签：

    上一篇ASP.NET MVC 微信JS-SDK认证（weixin js sdk）

    下一篇php 输出json及显示json中的中文汉字详解及实例（php输出json输出中文）

    相关文章