本篇主要讲解单向数据绑定之小于号(<)绑定,主要用于父与子的单向数据通信。建议先阅读 探讨Angular1.5的Lifecycle Hooks
先看下我这里写的Demo。
其实, 前面有一篇文章关于实现Timezone的Dropdown(How to implement timezone dropdown with moment.js?),也用到了这里的小于号绑定。
Vue, React, Angular是时下比较火的前端js Frameworks, 他们都有共同的特点:双向数据绑定,组件化开发。而在Angular1.5版本之前,是以directive作为组件化,而directive本事是一个指令,并非一个组件,所以它并不能很好的承担组件这一职责, 所以google在1.5 version中推出了component组件,是Angular应用中最重要的构建单元,用于承担应用中组件化开发的重担。Components are the most basic building block of an UI in an Angular application.
在component的重复和嵌套使用中,我们经常遇到component之间的通信问题。那么当父component中数据产生变化时,子component又如何收到数据呢?
创建入口模块app
HTML ./index.html1
2
3
4
5
6
7<div class="container" ng-app="app">
<div class="page-header">
<h1>Ony way data-binding(<)<small>parent to child</small></h1>
</div>
<parent-component></parent-component>
</div>
Javascript: 创建app模块1
angular.module('app',[]);
创建父component: parentComponent
HTML ./tpl/parent2child-parent.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<div class="well">
<form class="form-horizontal">
<div class="form-group">
<label for="input" class="col-sm-4 control-label">parent Component</label>
<div class="col-sm-8">
<input class="form-control" id="input" ng-model="inputWording" placeholder="please input your wording ...">
</div>
</div>
<div class="form-group">
<label for="input" class="col-sm-4 control-label">child Component</label>
<div class="col-sm-8">
<child-component input="inputWording"></child-component>
</div>
</div>
</form>
</div>
对inputWording进行双向数据绑定,并作为child-component的属性值1
2
3
4
5
6
7angular.module('app')
.component('parentComponent', {
templateUrl: './tpl/parent2child-parent.html',
controller: function($scope) {
$scope.inputWording = ''
}
})
创建子component: childComponent
HTML ./tpl/parent2child-child.html1
2
3
4
5
6<select class="form-control"
ng-model="selected"
ng-options="item.label for item in options"
>
<option value=""> Please select your option </option>
</select>
1 | .component('childComponent', { |
Knowledge points
- 在子component中,bindings: { input: ‘<’ }, input属性将接收父component传递过来的数据, ‘<’标识表示了单向数据流,单向数据流会使子component中的$onChanges钩子被调用。
- 在父component或控制器中,加载子component:
。
To be continued …