Angularjs：NG-單擊指令不能正常工作

我想實現用指令的簡單分頁中angularjsAngularjs：NG-單擊指令不能正常工作

控制器

//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); 
     }); 
    }

當HTTP調用結束後我使用的是指令是打印分頁鏈接。

HTML

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

指令

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); 

     } 
    }; 
})

但問題是在anchorng-click="getData()"沒有工作，爲什麼它沒有得到工作。

的差異getData()在控制器

來源

2017-10-11 Jabaa

你有很多關於如何將功能傳遞給指令提供答案。例如：https://stackoverflow.com/questions/18378520/angularjs-pass-function-to-directive – eminlala

我覺得HREF =「」可能會被重定向或刷新你的頁面，這就是爲什麼NG-點擊是沒有得到觸發定義。請嘗試以下操作。

href="#"

或

href="javascript:void(0)"

來源

2017-10-11 10:01:42

你需要傳遞函數指令用於從指示功能的訪問。

的Html

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

指令

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); 

    } 
}; 
})

來源

2017-10-11 10:19:26

Angularjs：NG-單擊指令不能正常工作

回答

相關問題