如何將常用代碼塊轉換爲AngularJS中的指令？

我有一個代碼塊，用於分頁（下一個/上一個）按鈕，我想在頁面頂部和底部顯示按鈕，但是將它寫出兩次似乎是錯誤的。如何將常用代碼塊轉換爲AngularJS中的指令？

我以前發的指令，但我也不太清楚如何添加代碼，這樣每次我寫：

<pages />，例如，它會叫我的分頁代碼塊。

這裏有一個小提琴：http://jsfiddle.net/9cjFz/

正如你所看到的，我有在頂部和底部相同的代碼塊。我不確定也許ng-template是要走的路？或者，如果我甚至可以得到像<pages />那樣整潔的東西？

在此先感謝！

來源

2014-02-27 Prodikl

這可能很容易不創建一個範圍，並設置模板等於您在那裏使用的HTML塊。因此，像：（我只是轉換了您的HTML到一個js字符串）

app.directive('pages', function(){  
    var html = " <div class=\"pages\">"; 
     html += "  <button ng-disabled=\"currentPage == 0\" ng-click=\"currentPage=currentPage-1\">"; 
     html += "   Previous"; 
     html += "  <\/button>"; 
     html += "  {{currentPage+1}}\/{{numberOfPages()}}"; 
     html += "  <button ng-disabled=\"currentPage >= data.length\/pageSize - 1\" ng-click=\"currentPage=currentPage+1\">"; 
     html += "   Next"; 
     html += "  <\/button>"; 
     html += " <\/div>"; 
    return { 
     template: html, 
     scope:false, 
     restrict: 'E', 
     replace:true   
    }; 
});

您也可以直接從你的HTML與NG-模板，如果你喜歡引用的模板。

fiddle

來源

2014-02-27 04:03:38 calebboyd

感謝您的支持，這很好。我想知道這是否是普遍的/好的做法？ – Prodikl

@Prodikl yep這是執行它的標準方法。雖然你可能想把你的模板放到它自己的文件中，而不是一個大的JavaScript字符串。您也可以選擇將參數傳遞到指令中，而不是依賴外部控制器的範圍。 – rob

感謝您的確認。我怎麼能傳遞參數到像這樣的元素指令？ – Prodikl

如何將常用代碼塊轉換爲AngularJS中的指令？

回答

相關問題