这个是1.5后新加的内容,我一直找不到关于这块内容的英文文档,下面是我摸索出来的使用方法,配合controllerAs使用。
一个组件,是一个被高度重复利用的部分,我们一般希望他是单向的,接收来自外部的状态等变量,来改变自身的内容,并不会影响除了自身以外的作用域变量。
component中创建的作用域是不继承$rootScope的,看个例子:
angular.module('myApp')
.component('userComponent', {
templateUrl: 'app/components/user.html',
controller: function userController(){
this.inner = "inner";
},
controllerAs: 'userCtrl',
bindings: {
input: '<'
}
});
这里创建了一个组件,bindings用来绑定外界来的数据,‘<’代表单向,‘=’代表双向。
之后,你可以在userhtml中这样引用在controller中初始化的变量
<div>
{{userCtrl.input}}
{{userCtrl.inner}}
</div>
注意,如果这里你不使用controllerAs,请按照往常的方法,在$scope上绑定变量,然后在html中调用的时候需要使用$ctrl.inner($ctrl可以理解为默认句柄)。
如果需要父页面的数据,你需要这样写input(随便起名,和bindings对应上即可)
<user-component input="someModel">
</user-component>
注意,组件你定义的时候是驼峰写法,在html引用组件的时候采用中间
- 的方法。