欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS数据绑定代码教程

程序员文章站 2022-07-05 17:41:12
1、数据->模板 数据到表现的绑定,主要是使用模板标记直接完成的:

{{ w }} x{{ h }}

使用 {{ }}这个标记,就可以直接引用,并绑定一个...

1、数据->模板

数据到表现的绑定,主要是使用模板标记直接完成的:

<p>{{ w }} x{{ h }}</p>

使用 {{ }}这个标记,就可以直接引用,并绑定一个作用域内的变量。在实现上, ng 自动创建了一个 watcher。效果就是,不管因为什么,如果作用域的变量发生了改变,我们随时可以让相应的页面表现也随之改变。我们可以看一个更纯粹的例子:

<p id="test" ng-controller="testctrl">{{ a }}</p>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('testctrl', function($scope){

    $scope.a = '123';

});

angular.bootstrap(document.documentelement,['app']);

</script>

上面的例子在页面载入之后,我们可以在页面上看到 123。这时,我们可以打开一个终端控制器,输入:

$('#test').scope().a= '12345';

$('#test').scope().$digest();

上面的代码执行之后,就可以看到页面变化了。

对于使用 ng进行的事件绑定,在处理函数中就不需要去关心 $digest() 的调用了。因为 ng 会自己处理。中,对于 ng 的事件绑定,真正的处理函数不是指定名字的函数,而是经过 $apply() 包装过的一个函数。这个 $apply()做的一件事,就是调用根作用域 $rootscope 的 $digest() ,这样整个世界就清净了:

<p id="test" ng-controller="testctrl"ng-click="click()">{{ a }}</p>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('testctrl', function($scope){

    $scope.a = '123';

    $scope.click = function(){

      $scope.a = '456';

    }

});

angular.bootstrap(document.documentelement,['app']);

</script>

那个 click 函数的定义,绑定时变成了类似于:

function(){

  $scope.$apply(

    function(){

      $scope.click();

    }

  )

}

这里的 $scope.$apply()中做的一件事:

$rootscope.$digest();

2. 模板->数据

模板到数据的绑定,主要是通过 ng-model 来完成的:

<input type="text" id="test" ng-controller="testctrl"ng-model="a"/>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('testctrl', function($scope){

    $scope.a = '123';

});

angular.bootstrap(document.documentelement,['app']);

</script>

这时修改 input 中的值,然后再在控制终端中使用:

$('#test').scope().a

查看,发现变量 a 的值已经更改了。

实际上, ng-model是把两个方向的绑定都做了。它不光显示出变量的值,也把显示上的数值变化反映给了变量。这个在实现上就简单多了,只是绑定 change事件,然后做一些赋值操作即可。不过 ng 里,还要区分对待不同的控件。

3. 数据->模板->数据->模板

现在要考虑的是一种在现实中很普遍的一个需求。比如就是我们可以输入数值,来控制一个矩形的长度。在这里,数据与表现的关系是:

长度数值保存在变量中

变量显示于某个 input 中

变量的值即是矩形的长度

input 中的值变化时,变量也要变化

input 中的值变化时,矩形的长度也要变化

当然,要实现目的在这里可能就不止一种方案了。按照以前的做法,很自然地会想法,绑定input 的 change事件,然后去做一些事就好了。但是,我们前面提到过 ng-model 这个东西,利用它就可以在不手工处理 change 的条件下完成数据的展现需求,在此基础之上,我们还需要做的一点,就是把变化后的数据应用到矩形的长度之上。

最开始,我们面对的应该是这样一个东西:

<p ng-controller="testctrl">

  <p style="width: 100px; height: 10px; background-color:red"></p>

  <input type="text" name="width" ng-model="width" />

</p>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('testctrl', function($scope){

    $scope.width = 100;

});

angular.bootstrap(document.documentelement,['app']);

</script>

我们从响应数据变化,但又不使用 change事件的角度来看,可以这样处理宽度变化:

angular.module('app',[], angular.noop)

.controller('testctrl',function($scope){

  $scope.width = 100;

  $scope.$watch('width',

    function(to, from){

      $element.children(':first').width(to);

    }

  );

});

使用 $watch() 来绑定数据变化。

当然,这种样式的问题,有更直接有效的手段, ng 的数据绑定总是让人惊异:

<p ng-controller="testctrl">

  <p style="width: 10px; height: 10px; background-color:red" ng-style="style">

  </p>

  <input type="text" name="width" ng-model="style.width" />

</p>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('testctrl', function($scope){

    $scope.style = {width: 100 + 'px'};

});

angular.bootstrap(document.documentelement,['app']);

</script>