AngularJS: bind expression to component

Question

I have following component:

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

controller:

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

and view:

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

I expected $ctrl.todo.items be evaluated and passed as object from wrapper-controller to PagingController. Is my assumption correct? What am I doing wrong?

data is reserved as an attribute prefix. Use another name for that binding. — georgeawg
– georgeawg, Commented Nov 20, 2016 at 18:29

Sumit Deshpande · Accepted Answer · 2016-11-21 03:15:19Z

I created a paging component based on your above description which accept data from wrapper-controller (mainController). Please check the demonstration.

I hope this will help.

Paging Component -

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
  }
}

Component 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>

Usage -

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

Collectives™ on Stack Overflow

AngularJS: bind expression to component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related