how to create custom Directive in angular

Question

i was trying a sample pagination for that i have created an directive like this(am not sure its correct)

(function() {
app.directive("myPagination", function() {
    return {
        restrict: 'E',
        templateUrl: 'pag.html'
    };
 });
})();

and my pag.html is

<ul class="pagination" ng-controller="PagingController">
<li ng-repeat="x  in pageing" ng-click="change(x.pageno)"><a href="#">{{x.pageno}}</a></li>
</ul>

and my PageingController is like this

 app.controller('PagingController', function($scope) {
    $scope.$on('pageinfo', function(event, args) {
        $scope.numbtn = args.numbtn;
        $scope.totaldata = args.totaldata;
        $scope.selet = args.selet;
        $scope.starter();
    })

    $scope.starter = function() {
        $scope.pageing = [];
        let i;
        for (i = 0; i < $scope.numbtn; i++) {
            $scope.pageing[i] = i;
        }
        console.log($scope.pageing);
    }
    $scope.change = function(btnclk) {
        alert(btnclk);
    }
});

and <my-pagination></my-pagination> this is how i tried in index page. but the problem is its not showing anything even no errors can any one correct this please

mmm just double check the path of your templateUrl of directive ... it has to be from the root of your project — federico scamuzzi
– federico scamuzzi, Commented Mar 24, 2017 at 8:52
You shouldn't have ng-controller in template for directive. — Arg0n
– Arg0n, Commented Mar 24, 2017 at 8:52
Read AngularJS Developer Guide - Creating Custom Directives. See also AngularJS Comprehensive Directive API Reference. — georgeawg
– georgeawg, Commented Mar 24, 2017 at 15:31

Sachila Ranawaka · Accepted Answer · 2017-03-24 09:04:02Z

2

Add the PageingController controller to directive instead of the template

(function() {
app.directive("myPagination", function() {
    return {
        restrict: 'E',
        templateUrl: 'pag.html',
        controller : 'PagingController'
    };
 });
})()

Demo

Make sure subscriber event $on is executing. otherwise page array is empty

edited Mar 24, 2017 at 9:04

answered Mar 24, 2017 at 8:54

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Edison Augusthy Over a year ago

i tried this but getting Error: ng:areq Bad Argument Argument 'PageingController' is not a function, got undefined error

Sachila Ranawaka Over a year ago

spelling mistake should be PagingController

Edison Augusthy Over a year ago

now its not getting error...but <my-pagination></my-pagination> is not displaying..am i wrong anywhere else..?

Sachila Ranawaka Over a year ago

try to remove on function and add this $scope.pageing = [{pageno : 1},{pageno : 2}] array. Check and tell me is it working

Edison Augusthy Over a year ago

i alredy updated it like this ` $scope.pageing=[];` $scope.pageing.push({pageno :i});but no result

|

Collectives™ on Stack Overflow

how to create custom Directive in angular

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related