Question

我有一个代码块，我用于分页（下一个/上一个）按钮，我想在页面的顶部和底部，但是将它写出两次似乎是错误的。

之前我已经制定了指令，但是我不太确定如何添加代码以便每次写入时都会：

例如，

<pages />，它会给我分页代码块。

这是一个小提琴：http://jsfiddle.net/9cjFz/

如您所见，我在顶部和底部都有相同的代码块。我不确定ng-template是否可以走？或者，如果我能得到像<pages />一样整洁的东西？

提前致谢！

Answer 1

这可能很容易，无法创建范围并将模板设置为等于您在那里使用的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        
    };
});

如果您愿意，也可以使用ng-template直接从您的html引用模板。

fiddle

如何将常用代码块转换为AngularJS中的指令？

1 个答案: