1

我创建了分页器指令：

myApp.directive("paginator", function($timeout) {
  return {
  restrict: "E",
  link: function (scope, element, attr) {

    var totalProducts = scope.productsConfig.total,
        MAX_PER_PAGE = +(scope.productsConfig.limit),
        pagesQty = Math.ceil(totalProducts/MAX_PER_PAGE),
        markup = "";

    //Add initial markup ul open tag
    markup += "<ul class='ch-pagination'>";

    //Add the previous button if needed
    if(scope.lastStatus.p > 1) {
        //Then add the previous button
        var previousPage = +(scope.lastStatus.p) - 1;

        markup += "<li><a ng-click='goToPage(" + previousPage + ")'>Previous</a></li>";
    }

    //Add the elements
    for (var i = 1; i <= pagesQty; i++) {

        if(scope.lastStatus.p == i){
            var activeClass = "class='ch-pagination-current'";
        } else {
            activeClass = "";
        }

        markup += "<li " + activeClass + "><a ng-click='goToPage(" + i + ")'>" + i + "</a></li>"
    }

    //Add the next element if any
    if(scope.lastStatus.p < pagesQty) {
        //Then add the previous button
        var nextPage = +(scope.lastStatus.p) + 1;

        markup += "<li><a ng-click='goToPage(" + nextPage + ")'>Next</a></li>";
    }

    //Close the paginator
    markup += "</ul>";

    //Inject the code into the wrapper
    $(".inventory-paginator").html(markup);

}

} });

注入我的方法的行（除其他外）：

markup += "<li " + activeClass + "><a ng-click='goToPage(" + i + ")'>" + i + "</a></li>"

然后单击生成的标记时调用我的方法 goToPage 。使用分页器时，尝试单击某个页面按钮，没有任何反应，ng-click 从不执行 goToPage 方法，即使生成的标记是：

 "ng-click='goToPage(2)'"

主控制器内部的方法：

$scope.goToPage = function (intPage) {
    var requestUrl = $scope.buildSearchRequestUrl(intPage);
    console.log("goToPage requestUrl: " + requestUrl);

    //Request the data, on success show the table again
    $http.get(requestUrl)
    .success(function (data) {
        $scope.inventoryData = data;
    }).error(function (data) {
        if(window.console){
            console.log("The article couldnt be paused");
        }
    });
}

我猜我错过了一些链接，但无法弄清楚在哪里，或者为什么。

提前非常感谢，

吉列尔莫

4

2 回答 2

3

你试过编译它吗？每当您想从 HTML 调用指令时，都应该编译指令。

请参阅http://docs.angularjs.org/guide/directive

于 2013-09-20T21:42:40.993 回答
2

正如 roland 指出的那样，您必须使用该$compile服务来编译 html，然后附加它的指令元素。如果没有 $compile 步骤，角度无法链接 ng-click 指令。

myApp.directive("paginator", function($timeout, $compile) {
  return {
  restrict: "E",
  link: function (scope, element, attr) {

    var totalProducts = scope.productsConfig.total,
        MAX_PER_PAGE = +(scope.productsConfig.limit),
        pagesQty = Math.ceil(totalProducts/MAX_PER_PAGE),
        markup = "";

    //Add initial markup ul open tag
    markup += "<ul class='ch-pagination'>";

    //Add the previous button if needed
    if(scope.lastStatus.p > 1) {
        //Then add the previous button
        var previousPage = +(scope.lastStatus.p) - 1;

        markup += "<li><a ng-click='goToPage(" + previousPage + ")'>Previous</a></li>";
    }

    //Add the elements
    for (var i = 1; i <= pagesQty; i++) {

        if(scope.lastStatus.p == i){
            var activeClass = "class='ch-pagination-current'";
        } else {
            activeClass = "";
        }

        markup += "<li " + activeClass + "><a ng-click='goToPage(" + i + ")'>" + i + "</a>   </li>"
        }

    //Add the next element if any
    if(scope.lastStatus.p < pagesQty) {
        //Then add the previous button
        var nextPage = +(scope.lastStatus.p) + 1;

        markup += "<li><a ng-click='goToPage(" + nextPage + ")'>Next</a></li>";
    }

    //Close the paginator
    markup += "</ul>";

    //append and compile code to element
    element.append($compile(markup)(scope));

});
于 2013-09-20T21:47:05.237 回答