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

ローランドが指摘したように、$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));

});
于 2013-09-20T21:47:05.237 に答える