如何将常用代码块转换为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中的指令？

回答

相关问题