angularjs培训之重新理解双向绑定和事件详解

双向绑定是angularjs亮点之一,在前面的《angularjs培训之helloworld》篇中大概介绍了下双向绑定,现在我们“旧事重提”,先看下下面的代码片段:

view中:

 <input type=‘button‘ ng-click="set()" value="set Value">
 <input type="text" ng-model=‘userName2‘>

controller中对应的方法:

 $scope.set = function(){
     $scope.userName2 = ‘Eason‘;
 }
 $scope.$watch(‘userName2‘,function(){
     alert(‘ng-model userName2 has been changed, now is :‘ + $scope.userName2);
 });

我们要实现的功能是:点击按钮给model名为“userName2”的input框设置为字符串“Eason”,使用$watch注册一个观察事件,当模型userName2的值发生变化时,会触发注册的回调方法,打印出该模型中的值。

有了这个图双向绑定好理解多了吧。内部的实现机制后续咱们介绍。

有了按钮怎么给按钮注册呢?在angularjs中我们可以使用内置的指令ng-click来绑定事件,即上面代码中的 ng-click="set()",在controller中就可以使用 scope.set的形式实现方法。ng-click其实对html原始click事件的封装,其实不止是click事件,原生的事件向focus,blur,change事件都可以在angularjs中官方API中找到对应的方法。具体的可以戳这里http://docs.angularjs.cn/api/ng/directive

在上讲中我们通过实例看了下scope的嵌套,现在如果我们想要一个特定的功能能横跨多个scope,需要提供一个有用的方法使得可以在任意两个controller之间通信,该怎么做呢?其实在angularjs中提供了沿着scope作用域链向上或者向下发送消息来通信,即$emit,$broadcast

先看下图:

$emit从当前scope开始向上发送请求,该请求到达$rootScope为止,

$broadcast从当前scope开始向下发送请求,

$emit的基本用法:

$scope.$emit(‘event name‘,argument);

$scope.$broadcast(‘event name‘,argument);

第一个参数为事件名称,第二个名字即为要传递的数据。

现在有了向上和向下传递事件的方法了,该怎么接受对应的事件名称呢?我们可以使用$on监听。如下:

$scope.$on(‘event name‘,function(evt) {

});

下面看一个完整的例子:

function innerCtrl($scope){
    $scope.$emit(‘someEvent‘, [1,2,3]);
}
    
 function outerCtrl($scope){
    $scope.$on(‘someEvent‘, function(mass) {console.log(mass)});
 }
 
 通过运行代码,我们在控制台能看到数组的值。

Event 对象还有很多熟悉和方法,我们大概浏览下:

targetScope,

currentScope,

name,

stopPropagation,

preventDefault,

defaultPrevented :Calling preventDefault() sets defaultPrevented to true

Angularjs也提供了监听公共事件状态的event,例如(之摘录了一部分):

$includeContentLoaded : The $includeContentLoaded event fires from the ngInclude directive                          when the ngInclude content is reloaded.

$locationChangeSuccess : The $locationChangeSuccess event is broadcasted from the                                   $rootScope if and only if we have not prevented the                                       $locationChangeStart event when the location of the browser                                changes successfully

$routeChangeSuccess:

$destroy

好了,这次的介绍到此为止了,有问题请留言,谢谢!

时间: 2024-08-04 19:34:25

angularjs培训之重新理解双向绑定和事件详解的相关文章

Angular系列----AngularJS入门教程05:双向绑定(转载)

在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g

[转载]AngularJS入门教程04:双向绑定

在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g

【Hibernate步步为营】--双向关联一对一映射详解(二)

很不好意思,有两天时间没有更新博客文章了,不写文章的日子还真是感觉很空洞啊,养成了写文章的恶习想改也改不掉啊.说点题外话,前两天收到一位朋友的私信,邀请笔者写一篇有关OWS的文章,用来研究图标工具的一种技术,很荣幸收到这位朋友的邀请,但是因为这几天开发的项目着急上线所以暂时没有时间去研究,只能等这周末了,利用周末的时间来研究然后更新类似的技术文章. 回到文章的正题,上篇文章讨论了双向主键关联,它其实是一对一主键关联的一种特殊情况,想要实现双向的关联就必须在映射文件的两端同时配置<one-to-o

彻底理解浮动float CSS浮动详解 清除浮动的方法

我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 2. 浮动流 使我们学习的脱离标准流的第一种方式.会影响我们标准流的排列.所以,我们布局的时候,能用标准流做的,就不用浮动做. 3. 定位流 定位流也是脱离标准流的一种模式.它完全脱离标准流,不会对标准流有影响. 浮动(float) 我们要浮动的目的: 我们浮动的目的,就是可以把多个块级元素放到想要

【Hibernate步步为营】--双向关联一对一映射详解(一)

摘要:本文以我自己设计植物大战僵尸碰撞检测算法为例进行分析,浅谈游戏开发中碰撞检测算法.本文所提及的碰撞算法与数据结构也可应用于跑酷等游戏中. 关键优化技术1:只检测逻辑上可能存在碰撞关系的物体.比如植物大战僵尸中,植物发射的子弹只能打击其所在行的僵尸,因此子弹只需遍历检测本行的僵尸,而不是存在场景中的全部僵尸.对于地铁跑酷,奔牛跑酷,吃金币的碰撞检测算法亦是如此. 关键优化技术2:子弹检测碰撞僵尸,或是僵尸检测碰撞子弹,谁检测谁碰撞谁的问题,这个可能跟具体项目息息相关.可以从算法效率,以及设计

ASP.NET Eval四种绑定方式 及详解

1.1.x中的数据绑定语法 <asp:Literal id="litEval2" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "userName")%>' /> 2. 2.x简化Eval数据绑定语法 <asp:Literal id="litEval1" runat="server" Text='<

深入理解HTTP协议—HTTP协议详解(真的很经典)

引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,而且HTTP-NG(Next Generation of HTTP)的建议已经提出.HTTP协议的主要特点可概括如下:1.支持客户/服务器模式.2.简单快速:客户向服务器请求服务时,只需传送请求方法和路径.请求方法常用的有GET.HEAD.POS

深入理解Oracle调试事件:10046事件详解

10046事件是SQL_TRACE的扩展,被戏称为"吃了兴奋剂的SQL_TRACE"       有效的追踪级别:              ① 0级:SQL_TRACE=FASLE       ② 1级:SQL_TRACE=TRUE,这是缺省级别       ③ 4级:1级+绑定变量       ④ 8级:4级+等待事件       ⑤ 12级:4级+8级              对于4级的10046,若用tkprof格式化,则会隐藏每一点SQL语句在做什么以及怎么做       

深入理解JVM之垃圾回收详解

一.垃圾收集的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象的内存时,该内存便成为垃圾.JVM的一个系统级线程会自动释放该内存块.垃圾收集意味着程序不再需要的对象是"无用信息",这些信息将被丢弃.当一个对象不再被引用的时候,内存回收它占领的空间,以便空间被后来的新对象使用.事实上,除了释放没用的对象,垃圾收集也可以清除内存记录碎片.由于创建对象和垃圾收集器释放丢弃对象所占的内存空间,内