AngularJS - 当使用指令生成标记时，无法使用ng-click执行方法

AngularJS - can´t execute methods with ng-click when markup is generated with a directive

本文关键字：ng-click 方法 执行 指令 AngularJS      更新时间：2023-09-26

我已经创建了我的分页器指令：

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");
        }
    });
}
我

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

提前非常感谢，

吉列尔莫

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

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

正如 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));
});
相关文章：