Javascript 在AngularJS中创建通用的可重用模块

我现在开始掌握Angular的诀窍，因为我正在开发我的第一个应用程序，但有一件事我正努力想办法解决

我想创建一个可重用的表模板，可以在任何需要的地方显示一组数据。我已经创建了一个控制器来获取数据并对其进行解析，并且我已经能够实现表的一个实例作为ng include和自定义指令

我遇到的问题是，当我想以微妙不同的方式多次显示相同的数据时。例如，我可能希望将表中的数据限制为前10个条目，或者显示按一个属性或另一个属性排序的数据。我是否需要为表的每个不同实例创建一个全新的控制器？如果我可以像这样通过视图模板传入这些参数，那就太好了：

<div ng-controller="tableCtrl">
    <div table-template tabLimit=5 tabOrder=['Date','Time']></div>  
    <div table-template tabLimit=20 tabOrder=['Title']></div>  
    <div table-template tabLimit=10 tabOrder=['Date','Time']></div>  
</div>

经验丰富的角编码器如何建议做这样的事情？我对生成这么多行代码来完成如此微妙的变化感到不舒服

---

非常感谢。

那么您已经将此作为指令实施了吗？看看这个：

HTML

<div ng-app="myApp">
    <div table-template="" tab-limit="5" tab-order="Date,Time"></div>  
    <div table-template="" tab-limit="20" tab-order="Title"></div>  
    <div table-template="" tab-limit="10" tab-order="Date,Time"></div>  
</div>

还可以使用指令对象中的

scope

属性将属性值绑定到范围变量。但我认为这个版本更容易理解

---

要显示和排序数据，可以使用带过滤器的

ngRepeat

。如果您可以提供您当前拥有的模板，我也可以帮助您。

我认为您需要将

tabOrder

值用引号括起来，如

tabOrder=“['Date'，'Time']”

参见

ng grid

实现。它使用一个

gridOptions

对象来调整网格的设置。这正是我所希望的。这意味着一个模块可以普遍使用，无需大量重复代码，谢谢！这对我来说很有意义，所以我想我可以把它连接到我的ng重复和过滤器上。当我有机会的时候，我会尝试一下，如果我有任何问题，我会回到这里。

angular.module('myApp', [])

.directive('tableTemplate', function() {
    return {
        // restrict directive to attrubute "table-template"
        restrict: 'A',
        // fill the directive element with this:
        template: '{{data.limit}}, {{data.order}}',
        // create a seperate scope for every instance of this directive 
        // since each contains their own data
        scope: true,
        // fetch the values from the attributes
        controller: function($scope, $attrs) {
            $scope.data = {
                order: $attrs.tabOrder.split(','),
                limit: $attrs.tabLimit
            };
        }
    }
});