Javascript AngularJS-can和#xB4；当使用指令生成标记时，t使用ng click执行方法

我已经创建了我的paginator指令：

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

}

主控制器内的方法：

$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调用指令，就应该编译它

---

参见

您是否尝试编译它？只要您想从HTML调用指令，就应该编译它

---

正如罗兰指出的，您必须使用

$compile

服务来编译html，然后附加它指令元素。没有$compile步骤，angular无法链接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));

});

myApp.directive（“paginator”，函数（$timeout，$compile）{
返回{
限制：“E”，
链接：功能（范围、元素、属性）{
var totalProducts=scope.productsConfig.total，
每个页面的最大值=+（scope.productsConfig.limit），
pagesQty=Math.ceil（总产品/每页最大数量），
加价=”；
//添加初始标记ul-open标记
标记+=“
”；
//如果需要，添加上一个按钮
if（scope.lastStatus.p>1）{
//然后添加上一个按钮
var-previousPage=+（scope.lastStatus.p）-1；
标记+=“
上一个”
”；
}
//添加元素
对于（var i=1；i，正如罗兰指出的，您必须使用
$compile
服务来编译html，然后附加它指令元素。没有$compile步骤，angular无法链接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));

});

myApp.directive（“paginator”，函数（$timeout，$compile）{
返回{
限制：“E”，
链接：功能（范围、元素、属性）{
var totalProducts=scope.productsConfig.total，
每个页面的最大值=+（scope.productsConfig.limit），
pagesQty=Math.ceil（总产品/每页最大数量），
加价=”；
//添加初始标记ul-open标记
标记+=“
”；
//如果需要，添加上一个按钮
if（scope.lastStatus.p>1）{
//然后添加上一个按钮
var-previousPage=+（scope.lastStatus.p）-1；
标记+=“
上一个”
”；
}
//添加元素
对于（var i=1；我认为生成这样的标记是一个非常糟糕的主意，基本上您是在使用MVC框架生成意大利面。将标记分离到一个模板中，该模板包含在指令的
template
属性中，或者在
templateUrl
中指定的单独文件中，所有这些都将被修复。您可以编译该模板整件事，但为什么你会让你的生活变得如此复杂…？乔，我知道这是个坏主意，但我不得不使用基于jQuery的ui框架，需要让它工作起来。编译指令成功了，它现在正在工作。真的理解你的观点，但有时知道如何使用不太好的东西来做不太好的事情是件好事实践以获得结果。非常感谢您的时间和答案，祝您周末愉快。在
模板
或
模板URL
中声明标记以及在链接函数中声明jquery是处理此类场景的完全正常方法。生成这样的标记是一个非常糟糕的主意，基本上您使用的是MVC框架努力生成意大利面。将标记分离到指令的
template
属性中包含的模板中，或者分离到
templateUrl
中指定的单独文件中，所有这些都将被修复。你可以编译整件事，但为什么你会让你的生活变得如此复杂…？乔，我知道这是一个糟糕的Idea，但我不得不使用基于jQuery的ui框架，并且需要使其工作。编译指令成功了，它现在正在工作。真的理解你的观点，但有时知道如何使用不太好的实践来完成不太好的事情是很好的。非常感谢你的时间和回答，祝你周末愉快。de在
template
或
templateUrl
和链接函数中的jquery中阐明标记是处理这种情况的一种完全正常的方法。You rock！，这就成功了：在指令中注入$compile，然后遵循指导原则。作为过程，我将编译输出代码的每个指令。谢谢老兄！有一个nice weekend.You rock！，这就成功了：向指令中注入$compile，然后遵循指导原则。作为过程，我将编译每个指令输出代码。谢谢伙计！周末愉快。谢谢你的回答！周末愉快谢谢你的回答！周末愉快谢谢你的回答！周末愉快
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));

});