angularjs component 组件开发

目录

Component

组件注册-html部分

组件注册-JS部分

组件在页面中的使用

---

angularjs项目也有和vue一样的组件开发

这里浅尝辄止

Component

组件注册-html部分

<table>
    <tr ng-repeat="item in $ctrl.tableList order by item.index">
        <td>{{item.name}}</td>
        <td><button type="button" ng-click="show(item.name)"></button></td>
    </tr>
</table>

组件注册-JS部分

//自定义组件 by XXXX
module.component('tableColumn', {
    templateUrl: '/Client/Component/tableColumn.html',//组件html文件的url地址
    //transclude: true,//用于组件嵌套
    //默认控制器别名是$ctrl
    //父节点传值给组件
    //<：单向传递  =：双向绑定   但是如果是传递一个对象，由于是浅拷贝的原因，不管是=还是<都是双向绑定。。。
    bindings: {
        tableList: '=',
    },
    controller: function ($scope) {
        $scope.show = function (name) {
            console.log(name);//参数
            console.log($scope.$ctrl.tableList);//作用域的数据引用方法
        }
        
    }
});

组件在页面中的使用

<table-column table-list="tempTableList"></table-column>