关于AngularJs1.6.X中组件(component)的使用方法

这个是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中初始化的变量

{{userCtrl.input}} {{userCtrl.inner}}

注意,如果这里你不使用controllerAs,请按照往常的方法,在$scope上绑定变量,然后在html中调用的时候需要使用$ctrl.inner($ctrl可以理解为默认句柄)。

如果需要父页面的数据,你需要这样写input(随便起名,和bindings对应上即可)


注意,组件你定义的时候是驼峰写法,在html引用组件的时候采用中间 - 的方法。



你可能感兴趣的:(前端笔记)