Question

我正在尝试使用angularjs

中的指令实现简单的分页

控制器

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

        }
    };
})

但问题是ng-click="getData()"中的anchor无效，为什么它无法正常工作。

差异是getData()在控制器中定义

Answer 1

我认为href =＆＃34;＆＃34;可能是重定向或刷新页面，这就是为什么不会触发ng-click。试试如下。

@Transaction (noRollbackFor=YourRuntimeException.class)
void method (){
    try{
      service1.insertOne();
      service2.insertTwo();
    }
    catch(Exception ex) {
    // log exception
    }
}

或

$data = Get-Content test.md 
$newdata = ""
$n = 0
Foreach ($line in $data) {
    if ($n++ -gt 6) {
        if ($line -match '\[R\]') {
            $newdata += $line + "  `r`n"
        }
    } else {
        $newdata += $line + "  `r`n"
    }
}
$newdata > test2.md

Answer 2

您需要将该函数传递给指令，以便从指令访问该函数。

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

    }
};
})

Angularjs：ng-click in指令不起作用

2 个答案: