user3214545 user3214545 - 6 months ago 25
AngularJS Question

Angualrjs Directive

I am currently writing my first Angularjs Directive. I am trying to write one that helps me with pagination. So I want the user to be able to see up to 5 numbered links (1, 2, 3, 4, 5) when searchinf for something. If there are more than 5 pages of results they will be able to click an arrow > and see links 6 - 10 and so on. This is what I have so far:

var ReportsApp = angular.module('ReportsApp', []);

ReportsApp.directive('paginate', function () {
return {
restrict: 'A',
transclude: true,
scope: {
page: '=page'
},
link: function (scope, element, attrs) {
var page = scope.page;
updatePage();

function updatePage() {
if (page <= 5) {
for (page = 1; page <= 5; page++) {
element.attr('paginate')
}
}
}
}
}
});


I am not sure how of finish off the 'element.attr' line. The html so far is just

<div id="pages">
<a href="#" paginate page="p"></a>
</div>

Answer

Why not using a template and angular ng-repeat instead? something like this:

template: '<div id="pages">
            <a href="#" paginate page="n" ng-repeat="n in pages" ></a>
        </div>'

here is a sample where this goes:

return {
        restrict: 'A',
        transclude: true,
    scope: {
        page: '=page'
    },
    template: '<div id="pages">
        <a href="#" paginate page="n" ng-repeat="n in pages" ></a>
    </div>'
    link: function (scope, element, attrs) {
    ...
Comments