[英]Angularjs:ng-click in directive is not working
I am trying to implement a simple pagination with directives in angularjs 我正在尝试使用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. HTTP调用完成后,我正在使用的指令是打印分页链接。
HTML 的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. 但是问题是
anchor
中的ng-click="getData()"
无法正常工作,为什么它无法正常工作。
the difference is getData()
is defined in controller 区别在于
getData()
是在控制器中定义的
I think href="" might be redirecting or refreshing your page, which is why ng-click is not getting triggered. 我认为href =“”可能会重定向或刷新您的页面,这就是为什么ng-click不会被触发的原因。 Try it as below.
尝试如下。
href="#"
or 要么
href="javascript:void(0)"
You need to pass that function to directive for access that function from directive. 您需要将该函数传递给指令以从指令访问该函数。
Html 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);
}
};
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.