数据绑定

Posted 2020-10-07 追忆枉然

方向1（Model数据 绑定到View）：

<div ng-controller="myCtrl">
<p>{{count}}</p>
    <button ng-click="add()">点我</button>
</div>
<script>
    var app = angular.module(‘myApp‘, [‘ng‘]);
    app.controller(‘myCtrl‘, function ($scope) {
        $scope.count=0;
        $scope.add=function(){
            $scope.count++;
        }
    })
相比DOM操作：先去查找元素，再去设置元素，只需要把model数据绑定视图上，数据改，视图就会更新。

---

方向2的绑定（将View数据绑定到Model数据）

<div ng-controller="myCtrl">
    <input type="text" ng-model="text">
    <p>{{text}}</p>
</div>
<script>
    var app = angular.module(‘myApp‘, [‘ng‘]);
    app.controller(‘myCtrl‘, function ($scope) {
        $scope.text=20;
    })

首先是$scope方向1的绑定，绑定到view上，当在输入框输入时是对$scope中数据绑定，

实现方法只有一种方式： ng-model
<input type=‘text‘ ng-model=‘myText‘/>

$scope.$watch(‘模型变量名‘,function(){})