Angularjs:ng-click in directive is not working

Question

I am trying to implement a simple pagination with directives in angularjs

Controller

//load the result server 
$scope.getData  = function(page) {
        $http.post('/search?page='+page,searchParams).then(function (response) {

            if(response.data.status){
                $scope.arts        = response.data.result;
                $scope.currentPage = response.data.currentPage;
                $scope.pageCount   = response.data.pageCount;
            }else{
                $scope.arts = [];
            }
        },function (err) {
            $scope.arts = [];
            console.log(err);
        });
    }

When the HTTP call is finished i am using a directive is to print the pagination links.

HTML

<ul class="pagination pagination-circle pg-blue mb-0 paginate">
  <pagination pagecount="pageCount" currentpage="currentPage"></pagination>
</ul>

Directive

This directive just build pagination links and returns to 
app.directive('pagination',function () {
    //custom directive for build pagination
    return {
        restrict: 'E',
        scope: {
            pagecount: '=',
            currentpage: '='
        },
        link:function (scope,elem,attr) {
            var element = angular.element(document.getElementsByClassName('paginate'));
            var str ='';
            var i = 1;
            if (scope.currentpage > 5) {
                i = +scope.currentpage - 4;
            }

            for (i; i<=scope.pagecount; i++) {

                if (scope.currentpage == i) {
                    str+='<li class="page-item active"><a href="#" class="page-link" >'+i+'</a></li>'
                }else{
                    str+=' <li class="page-item"><a class="page-link" href="" ng-click="getData('+i+')">'+i+'</a></li>'
                }
                if (i == (+scope.currentpage + 4)) {
                    break;
                }
            }
            element.prepend(str);

        }
    };
})

But the problem is ng-click="getData()" in the anchor is not worked why its not getting worked.

the difference is getData() is defined in controller

You have a lot of answers available on how to pass a function to a directive. For example: https://stackoverflow.com/questions/18378520/angularjs-pass-function-to-directive — Emin Laletovic, Oct 11 '17 at 09:02

score 0 · Answer 1 · answered Oct 11 '17 at 10:01

0

I think href="" might be redirecting or refreshing your page, which is why ng-click is not getting triggered. Try it as below.

href="#"

or

href="javascript:void(0)"

answered Oct 11 '17 at 10:01

Harshali Talele

71
5

score 0 · Answer 2 · answered Oct 11 '17 at 10:19

You need to pass that function to directive for access that function from directive.

Html

<ul class="pagination pagination-circle pg-blue mb-0 paginate">
  <pagination pagecount="pageCount" get-data="getData()" currentpage="currentPage"></pagination>
</ul>

Directive

This directive just build pagination links and returns to 
app.directive('pagination',function () {
//custom directive for build pagination
return {
    restrict: 'E',
    scope: {
        pagecount: '=',
        currentpage: '=',
        getData: '&'    /**This is how you can access function of controller**/
    },
    link:function (scope,elem,attr) {
        var element = angular.element(document.getElementsByClassName('paginate'));
        var str ='';
        var i = 1;
        if (scope.currentpage > 5) {
            i = +scope.currentpage - 4;
        }

        for (i; i<=scope.pagecount; i++) {

            if (scope.currentpage == i) {
                str+='<li class="page-item active"><a href="#" class="page-link" >'+i+'</a></li>'
            }else{
                str+=' <li class="page-item"><a class="page-link" href="" ng-click="getData('+i+')">'+i+'</a></li>'
            }
            if (i == (+scope.currentpage + 4)) {
                break;
            }
        }
        element.prepend(str);

    }
};
})

Angularjs:ng-click in directive is not working

2 Answers2