angularjs培训之重新理解双向绑定和事件详解
来源:互联网 发布:python file exist 编辑:程序博客网 时间:2024/05/01 18:59
双向绑定是angularjs亮点之一,在前面的《angularjs培训之helloworld》篇中大概介绍了下双向绑定,现在我们“旧事重提”,先看下下面的代码片段:
view中:
<input type=’button’ ng-click=”set()” value=”set Value”>
<input type=”text” ng-model=’userName2’>
controller中对应的方法:
wKioL1Q2L0HyP3YwAADe4uPQjy0831.jpg
有了这个图双向绑定好理解多了吧。内部的实现机制后续咱们介绍。
有了按钮怎么给按钮注册呢?在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作用域链向上或者向下发送消息来通信,即
先看下图:
wKiom1Q2Pu-CYALSAABmlT2Q_e4935.jpg
$broadcast从当前scope开始向下发送请求,
$emit的基本用法:
第一个参数为事件名称,第二个名字即为要传递的数据。
现在有了向上和向下传递事件的方法了,该怎么接受对应的事件名称呢?我们可以使用$on监听。如下:
});
下面看一个完整的例子:
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,例如(之摘录了一部分):
$routeChangeSuccess:
$destroy
好了,这次的介绍到此为止了,有问题请留言,谢谢!
- angularjs培训之重新理解双向绑定和事件详解
- angularjs的双向绑定详解
- AngularJs 的使用之双向绑定和指令
- angularjs 双向绑定
- angularjs 双向绑定注意事项
- AngularJS双向数据绑定
- angularjs checkbox双向绑定
- AngularJS事件绑定的使用详解
- [Vue][自定义事件]关于组件prop双向绑定的理解和程序调试
- 日常总结之angularjs的双向绑定全透析
- JavaScript框架之AngularJS学习——双向数据绑定
- AngularJS系列——双向绑定和依赖注入
- Angularjs 数据的双向绑定和controller通信
- angularJS培训之$scope和controller
- AngularJS入门教程04:双向绑定
- AngularJS数据双向绑定揭秘
- AngularJS 数据双向绑定揭秘
- AngularJS入门教程04:双向绑定
- iOS学习之iOS沙盒(sandbox)机制和文件操作(二)
- 下载firebug以及设置firefox的语言.
- 【matlab】小游戏:用MATLAB编程验证——投掷硬币那“0.5”
- 基于Android平台的刷新加载形式初探
- Android app 第三方支付宝支付接入
- angularjs培训之重新理解双向绑定和事件详解
- 硬盘上有损坏区域,该如何重新分区
- C# JSON带中文字符、转义字符的转换处理
- js中的墙头草—this
- ImageView的scaleType属性待总结
- 9.[Leecode]Palindrome Number
- JavaCC -- Linux安装与使用
- iOS学习之iOS沙盒(sandbox)机制和文件操作之NSFileManager(三)
- Web Spider