欢迎使用CSDN-markdown编辑器
来源:互联网 发布:鲶鱼墨水 知乎 编辑:程序博客网 时间:2024/06/06 10:50
1
2
3
4
5
6
7
8
9
发布、订阅、退订
1
2
$on用于订阅事件,事件名称是订阅的唯一标识,每个考生看榜单时都要寻找自己的名字,然后根据自己的成绩等信息决定下一步应该报考什么学校:
// balabala
});
1
2
3
Angular的退订事件有些奇怪,并没有类似于其他语言的$off方法,所以不要想当然的按照如下方式进行事件的退订操作:
// 不要这样做
1
2
事实上,Angular的事件退订方法隐藏在事件订阅里面:使用$on订阅事件时会返回一个函数,而此函数就是用来退订事件的方法,就像是考生看到了自己的成绩后禀告父母大人,“商量着”选取学校填报志愿,而此志愿单就是结束整个高考榜单的结束:
// 订阅事件返回用于退订事件的函数
var deregister =
// balabala
});
// 退订事件
deregister();
1
2
3
4
5
6
7
具体到Angular上,即从一个
// 父
app.controller(‘ParentCtrl’, [‘
}])
//所有子
.controller(‘SiblingOneCtrl’, [‘
// balabala
});
}])
.controller(‘SiblingTwoCtrl’, [‘
// balabala
});
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
而通过
// 子
app.controller(‘SiblingOneCtrl’, [‘
}])
// 父
.controller(‘ParentCtrl’, [‘
// balabala
});
}])
// 其兄弟
.controller(‘SiblingTwoCtrl’, [‘
// 不要这样做
// balabala
});
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
在$emit发布事件的响应道路上,其任一祖先如果感觉不再需要此事件了,就可以通过如下方式终结此事件:
app.controller(‘ParentCtrl’, [‘
// balabala
event.stopPropagation(); // 终止事件继续“冒泡”
});
}])
1
2
3
4
5
6
app.controller(‘SomeCtrl’, [‘
// $rootScope也可以通过$on订阅从$rootScope.$broadcast发布的事件$rootScope.$on("rootEvent", function(event, 'Data to Send') { // balabala});
}])
// 所有
.controller(‘ParentCtrl’, [‘
// balabala
});
}])
.controller(‘SiblingOneCtrl’, [‘
// balabala
});
}])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
而
app.controller(‘SomeCtrl’, [‘
// 只有$rootScope可以通过$on订阅从$rootScope.$emit发布的事件$rootScope.$on("rootEvent", function(event, 'Data to Send') { // balabala});
}])
//
.controller(‘ParentCtrl’, [‘
// 不要这样做
// balabala
});
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
退订
app.controller(‘SomeCtrl’, [‘
var deregister =
// balabala
});
$scope.$on('$destory', function() { deregister(); // 退订事件});
}])
1
2
3
4
5
6
7
8
9
那通过
事件命名的建议
在开发中,对于变量的命名、函数的命名、文件的命名都有一定的规范,既要保证可读性,也需要保证无混淆性。在Angular的事件机制中,因为事件可能会跨函数,甚至可能跨文件,所以对于事件名一定要保证唯一性,所以建议事件名都加上特定的前缀,以便区分。如下几个例子:
1
2
3
4
5
结语
Angular的事件机制很智能,而且一般来说总能符合我们的预期,但是如果不能深入理解其背后的机制,可能会踏入某些深坑,本文尝试说明Angular的事件机制,如果有理解不正确的地方,请留言告知。
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 【Java学习之代码学习】 Prog07_哥德巴赫猜想
- thinkphp赋值判断标签
- wemall app商城源码Android之ListView异步加载网络图片(优化缓存机制)
- Android生成keystore是报错拒绝访问
- Android Handler消息机制源码解析(上)
- 欢迎使用CSDN-markdown编辑器
- 安卓底层开发学习经验第一期
- 页面状态还是组件?到底什么才是交互的中心?
- Linux系统下怎么安装.deb文件?
- 高性能网站建设方法集锦
- 使用silix做序列聚类
- 如何安排上班时间之外的时间
- Xcode8创建CoreData托管对象文件,编译报错
- Android RecyclerView 使用