<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<section ng-controller="fooController">
<div>
<input ng-model="modelPaginator.page" type="number" />
<select
ng-model="modelPaginator.perpage"
ng-options="perpage for perpage in modelPaginator.perpageOptions"
>
</select>
</div>
<br /><br />
<div>
<pg-paginator ng-model="modelPaginator">
</pg-paginator>
</div>
</section>
</body>
</html>
// Code goes here
(function(){
function PaginatorDirective() {
return {
restrict: 'E',
require: 'ngModel',
templateUrl: 'paginator.html',
scope: {
ngModel: '=',
},
};
}
function fooController($scope) {
$scope.modelPaginator = {
page: 1,
perpageOptions: [5, 10, 20],
perpage: 5
};
}
fooController.$inject = ['$scope'];
angular.module('app', [])
.controller('fooController', fooController)
.directive('pgPaginator', PaginatorDirective)
.directive('pgPaginatorPage', function() {
return {
restrict: 'A',
replace: true,
template: '<input type="number" ng-model="ngModel.page" />',
scope: false,
link: function(scope) {
// el scope de la directiva parece ser el mismo que el de pgPaginator
console.log(scope.ngModel);
}
};
});
})();
/* Styles go here */
<input pg-paginator-page />
<select pg-paginator-perpage ng-model="ngModel.perpage" ng-options="option for option in ngModel.perpageOptions"></select>
<br />
{{ngModel}}
<br />
{{ngModel.page}}