Angular基础入门---作用域和通信

  1. 在Angular中,controller父子之间是以一种原型链继 的方式来通信。
  2. 像ng-controller、ng-if、ng-include、ng-repeat、ng-switch等会创建DOM结构的指令都会创建作用域,这些作用域之间的通信可以通过$parent来访问父controller。

想深入详细了解Angular中的作用域,可以看AngularJS实例教程(二)——作用域与事件

说明

  1. Angular基础入门系列文章一共6篇,主要是为了github上“course-angular”仓库的一个说明性的小文章。
  2. 随着Vue、React的逐渐流行开来,Angular也发布了第二版,Angular1.x版使用开始减少,但是有时可能会遇到一些Angular1.x的一些问题,另外前端技术发展太快,技术一段时间不使用,就可能遗忘,这个小系列文章和github上的course-angular也是为了日后回头看看Angular相关基础之用。

Angular基础入门

  1. Angular基础入门–数据绑定和指令
  2. Angular基础入门—过滤器
  3. Angular基础入门—作用域和通信
  4. Angular基础入门—ng-Route
  5. Angular基础入门—ui-Router
  6. Angular基础入门—自定义指令(组件)

以下每个实例的公共的util工具类
common.util.js

1
2
3
4
5
6
module.exports = {
render: function(str){
var body = document.querySelector('body');
body.innerHTML = str + body.innerHTML;
}
}

基于angular别名的父子控制器之间的通信(作用域链通信)

demo10.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var demoTpl = require('../tpls/demo11.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
var myApp = angular.module('myApp', []);
myApp.controller('provinceController', function($scope) {
this.name = "taiwan";
});
myApp.controller('cityController', function($scope) {
this.name = "taibei";
});
myApp.controller('sectionController', function($scope) {
this.name = "qianfeng";
});

demo10.string

1
2
3
4
5
6
7
8
9
10
11
<div>
<div ng-controller="provinceController as p">
{{p.name}}
<div ng-controller="cityController as c">
{{p.name}}-{{c.name}}
<div ng-controller="sectionController as s">
{{p.name}}-{{c.name}}-{{s.name}}
</div>
</div>
</div>
</div>

基于angular的服务通信

demo10.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var demoTpl = require('../tpls/demo10.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
var myApp = angular.module('myApp', []);
myApp.factory('User', function(){
var user = {
id: 1,
name: 'lurongtao',
email: 'lurongtao@1000phone.com'
};
var _getUser = function() {
return user;
};
var _setUser = function(id, name, email) {
user.id = id;
user.name = name;
user.email = email;
};
return {
get: _getUser,
set: _setUser
}
});
myApp.controller('showController', function($scope, $log, $timeout, $http, $q, User) {
$scope.user = User.get();
});
myApp.controller('saveController', function($scope, $log, $timeout, $http, $q, User) {
$scope.user = User.get();
$scope.save = function(id, name, email){
User.set(id, name, email);
};
});

demo10.string

1
2
3
4
5
6
7
8
9
<div>
<div ng-controller="showController">
{{user.id}}/{{user.name}}/{{user.email}}
</div>
<div ng-controller="saveController">
{{user.id}}/{{user.name}}/{{user.email}}
<button ng-click="save('2', 'pengzhan', 'pengzhan@qq.com')">保存</button>
</div>
</div>

基于事件方式的控制器之前的通信

demo16.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var demoTpl = require('../tpls/demo16.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
var myApp = angular.module('myApp', []);
myApp.controller('child1Ctrl', function($scope) {
$scope.action = function() {
$scope.$emit('parent-ctrl');
$scope.$broadcast('child-ctrl');
}
});
myApp.controller('parentCtrl', function ($scope) {
$scope.$on('parent-ctrl', function(){
console.log('parentCtrl has been emited~');
});
$scope.$on('child-ctrl', function () {
console.log('childCtrl saved the broadcast info~');
});
});
myApp.controller('child2Ctrl', function ($scope) {
$scope.$on('parent-ctrl', function(){
console.log('---parentCtrl has been emited~');
});
$scope.$on('child-ctrl', function () {
console.log('---siblingCtrl saved the broadcast info~');
});
});
myApp.controller('grandsonCtrl', function ($scope) {
$scope.$on('parent-ctrl', function(){
console.log('parentCtrl has been emited~');
});
$scope.$on('child-ctrl', function () {
console.log('grandsonCtrl saved the broadcast info~');
});
});

demo16.string

1
2
3
4
5
6
7
8
9
<div class="demo16">
<div ng-controller="parentCtrl">
<div ng-controller="child1Ctrl">
<button ng-click="action()">click me</button>
<div ng-controller="grandsonCtrl"></div>
</div>
<div ng-controller="child2Ctrl"></div>
</div>
</div>

基于发布者/订阅者模式的控制器之间的通信

该部分内容请查看民工叔叔的AngularJS实例教程(二)——作用域与事件最后事件总线那段经典的代码实现。

测试功能而已,你非要赏点我就没办法了...