angular初学者的疑问

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="js/angular.js"></script>
</head>
<body ng-controller="myController">
    <input type="checkbox" name="" id="" ng-model="ischecked" />{{ischecked}}
    <script type="text/javascript">
        var module = angular.module("myApp",[]);
        module.controller("myController",["$scope",function($scope){
            $scope.ischecked = true;
            console.log($scope.ischecked)
        }])
    </script>
</body>

</html>

这个复选框是怎么知道我选取之后改变ischecked的值的??????求解释
难道我选了这个复选框,这个ischecked就变成了true了吗,这是什么原理啊?

阅读 2.9k
2 个回答
  1. angular加载的时候,看看dom树里面有个没有ng-app标签,如果有,说明这个鱼塘,哦不,是dom节点被angular承包了!

  2. 顺着这个鱼塘往下看,angular扫描到某个子dom节点上有ng-controller,说明这片池子被myController这个养鱼人管理

  3. 接着继续扫描子子dom节点,发现input这类节点上出现ng-model字样!这就是要搞事情啊!于是给input加个change事件的监听,一旦用户鼠标行为出发了change事件,则立即修改与ng-model绑定的某个变量,再通知养鱼人myController和老的值进行比较,如果不同,则更新myController里的值。

ng-model会绑定html元素到scope 绑定是双向的

angular给绑定的元素(你这边就是ischecked)加个监听,当一些事件触发,比如dom事件、响应事件等,angular若监听到数据的newValue与oldValue不一致,会进行检测,进行处理。

$scope.$watch('ischecked', function(newValue, oldValue) {
  //监听 ischecked 属性的变化
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题