AngularJS：将表达式绑定到组件答案

【问题标题】：AngularJS: bind expression to componentAngularJS：将表达式绑定到组件
【发布时间】：2017-04-04 01:20:53
【问题描述】：

我有以下组件：

.component('paging', {
            templateUrl: "feature/todo-feature/paging/paging.html",
            controller: "PagingController",
            bindings: {
                "data": "<"
            }
        });

控制器：

    $ctrl.incrementPage = function () {
        if ($ctrl.data[$ctrl.startFrom + $ctrl.limit]) {
            $ctrl.startFrom = $ctrl.startFrom + $ctrl.limit;
        }
    };

并查看：

<paging data="$ctrl.todo.items"></paging>

我希望 $ctrl.todo.items 被评估并作为对象从包装控制器传递到 PagingController。我的假设正确吗？我究竟做错了什么？

【问题讨论】：

data 保留为属性前缀。为该绑定使用另一个名称。

标签： javascript angularjs components

【解决方案1】：

我根据您的上述描述创建了一个 paging 组件，该组件接受来自包装控制器 (mainController) 的数据。请查看demonstration。

我希望这会有所帮助。

分页组件 -

app.component("paging", {
  templateUrl: 'pagingComponent.html',
  bindings: {
    data: '<'
  },
  controllerAs: 'model',
  controller: pagingControllerFn
});

function pagingControllerFn() {
  var model = this;
  model.currentPage = 0;
  model.pageSize = 0;
  model.limit = model.data.length;

  model.$onInit = function() {
    model.pageSize = 10; //do intialization
  }    
  model.$onChanges = function(changes) {
    model.data = changes; //Called in case of any change in parent controller data
  };

  model.numberOfPages = function() {
    return Math.ceil(model.limit / model.pageSize);
  }
  model.incrementPage = function() {
    model.currentPage = model.currentPage + 1;
  }
  model.decrementPage = function() {
    model.currentPage = model.currentPage - 1
  }
}

组件 Html (pagingComponent.html) -

<div>
  <select ng-model="model.pageSize" id="pageSize" class="form-control">
    <option value="5">5</option>
    <option value="10" ng-selected="true">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
  </select>
  <ul>
    <li ng-repeat="item in model.data | startFrom:model.currentPage*model.pageSize | limitTo:model.pageSize">
      {{item}}
    </li>
  </ul>
  <button ng-disabled="model.currentPage == 0" ng-click="model.decrementPage()">
    Previous
  </button>
  {{model.currentPage+1}}/{{model.numberOfPages()}}
  <button ng-disabled="model.currentPage >= model.limit/model.pageSize - 1" ng-click="model.incrementPage()">
    Next
  </button>
</div>

用法-

<body data-ng-app="myApp" data-ng-controller="mainController as vm">
  <paging data="vm.data"></paging>
</body>

【讨论】：