Angular JS数据的双向绑定详解及实例

2024-05-06 15:03:40

字体：大中小

来源：转载

供稿：网友

Angular JS数据的双向绑定

接触AngularJS许了，时常问自己一些问题，如果是我实现它，会在哪些方面选择跟它相同的道路，哪些方面不同。为此，记录了一些思考，给自己回顾，也供他人参考。

初步大致有以下几个方面：

数据双向绑定视图模型的继承关系模块和依赖注入的设计待定

数据的双向绑定

Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。

一个最简单的示例就是这样：

<div ng-controller="CounterCtrl">  <span ng-bind="counter"></span>  <button ng-click="counter=counter+1">increase</button></div>function CounterCtrl($scope) {  $scope.counter = 1;}

这个例子很简单，毫无特别之处，每当点击一次按钮，界面上的数字就增加一。

绑定数据是怎样生效的

初学AngularJS的人可能会踩到这样的坑，假设有一个指令：

var app = angular.module("test", []);app.directive("myclick", function() {  return function (scope, element, attr) {    element.on("click", function() {      scope.counter++;    });  };});app.controller("CounterCtrl", function($scope) {  $scope.counter = 0;});<body ng-app="test">  <div ng-controller="CounterCtrl">    <button myclick>increase</button>    <span ng-bind="counter"></span>  </div></body>

这个时候，点击按钮，界面上的数字并不会增加。很多人会感到迷惑，因为他查看调试器，发现数据确实已经增加了，Angular不是双向绑定吗，为什么数据变化了，界面没有跟着刷新？

试试在scope.counter++;这句之后加一句scope.digest();再看看是不是好了？

为什么要这么做呢，什么情况下要这么做呢？我们发现第一个例子中并没有digest，而且，如果你写了digest，它还会抛出异常，说正在做其他的digest，这是怎么回事？

我们先想想，假如没有AngularJS，我们想要自己实现这么个功能，应该怎样？

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>two-way binding</title>  </head>  <body onload="init()">    <button ng-click="inc">      increase 1    </button>    <button ng-click="inc2">      increase 2    </button>    <span style="color:red" ng-bind="counter"></span>    <span style="color:blue" ng-bind="counter"></span>    <span style="color:green" ng-bind="counter"></span>    <script type="text/javascript">      /* 数据模型区开始 */      var counter = 0;      function inc() {        counter++;      }      function inc2() {        counter+=2;      }      /* 数据模型区结束 */      /* 绑定关系区开始 */      function init() {        bind();      }      function bind() {        var list = document.querySelectorAll("[ng-click]");        for (var i=0; i<list.length; i++) {          list[i].onclick = (function(index) {            return function() {              window[list[index].getAttribute("ng-click")]();              apply();            };          })(i);        }      }      function apply() {        var list = document.querySelectorAll("[ng-bind='counter']");        for (var i=0; i<list.length; i++) {          list[i].innerHTML = counter;        }      }      /* 绑定关系区结束 */    </script>  </body></html>

上一篇：通过BootStrap-select插件 js jQuery控制select属性变化

下一篇：jQuery设置和获取select、checkbox、radio的选中值方法