5.AngularJS指令与双向数据绑定
发布在Angular学习之路2015年6月22日view:2817AngularjsBrettBat
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

在html中,我们经常会看到有一些我们不熟悉的东东,例如,ng-app,ng-controller等等之类的,这些在AngularJS中,我们称这些为指令,指令是来完成一些功能的,ng-controller就是一个控制器,能够连接视图与我们数据的一个桥梁,ng-app是一个初始化的指令,如果不写ng-app,AngularJS是不会执行的,因为没有初始化,可以把之前的例子的ng-app进行去掉可以看到AngularJS是不会执行的。

ng-app这个初始化可以写在<html>这个标签上面,也可以写在<body>或者

等等之类的html标签上面,代表着AngularJs初始化运行的范围,在这个范围内,AngularJS才回会执行。在开发一个项目中,有些时候,不是整个项目都是使用AngularJS进行开发的,可以进行局部的AngularJS开发。

AngularJS的双向数据绑定实质就是一个MVVM的一种设计模式,这种模式的数据发生改变的时候,会使相应的视图进行改变,当我们的视图上发生改变的时候,可以促使相应的数据发生改变,这就是双向的数据绑定到一起了。可以看以下例子:

function a($scope){
     $scope.name = 'zhou';
     setTimeout = (
          function(){
             $scope.name='xiao';
          },
      2000);
}

<div ng-controller="a">
     <p>{{name}}</p>
</div>

通过以上例子,你可能会说,你看,这在2秒过后,name的数值没有在视图上进行改变呀!难道真的是没有改变数据?其实,在数据内部,name数值的确变成了xiao,但视图却没有进行改变,因为setTimeout只是原生js的定时器,并没有触发视图进行新一轮的渲染,所以,这个时候我们得像注入$scope一样注入属于AngularJS的定时器$setTimeout:

function a($scope,$setTimeout){
     $scope.name = 'zhou';
     $setTimeout = (
          function(){
             $scope.name='xiao';
          },
      2000);
}

<div ng-controller="a">
     <p>{{name}}</p>
</div>

通过以上注入的$setTimeout,可以看到在2秒后,name改变成了xiao。

讲一下AngularJS的指令,例如ng-click指令,使用例子如下:

<div ng-controller="a" ng-click="name=xiao"></div>

通过使用ng-click指令,我们也可以触发数据的改变,可以在ng-click指令中直接写执行的代码或者挂一个函数都是可以的,例子:

$scope.show = function(){
     $scope.name = 'xiao';
}

<div ng-click="show()"></div>

通过以上例子可以学习下ng-click指令的用法。

其实类似的,还有ng-mouseover,ng-mousedown等等事件操作,都是从原生迁移过来。

以上都是一些数据,影响视图,以下,可以来看视图如何影响数据:

<div ng-controller="a">
    <input type="text" ng-model="name">
    <p ng-bind="name"></p>
</div>

ng-model这个指令绑定到name这个数值上面了,然后在input这个标签上写明ng-model了,就是input的指直接绑定到ng-model指定的指上,这就是从视图进行对数据的影响,这影响可以直接在

上面看得出来。

整个下来,就是从数据影响视图,视图影响数据的一个双向的过程。

评论
发表评论
2年前
添加了一枚【评注】:这里应该注入 $timeout()
2年前
添加了一枚【评注】:这里应该注入 $timeout()
2年前
添加了一枚【评注】:这里应该注入 $timeout()
WRITTEN BY
PUBLISHED IN
Angular学习之路

前段时间用了ionic的框架为整个系统运维部门开发了一个webapp,集成了angular框架的,然后这两个月以来一直在开发新项目,也用上了anguarl,自己的博客也在重建当中,把自己之前的记录或者后面遇到的知识点(有基础的,有深入的,有挖坑的,有填坑的,记录方方面面,持续更新),都来分享下,前端需要分享,分享使我们强大!

我的收藏