Question

当我构建我的第一个应用程序时，我现在开始了解Angular，但是我正在努力解决这个问题。

我想创建一个可重用的表模板，可以在任何需要的地方显示一组数据。我已经创建了一个控制器来获取数据并解析它，我已经能够将表的一个实例实现为ng-include和custom指令。

我遇到的问题是当我想以微妙的不同方式多次显示相同的数据时。例如，也许我想将表中的数据限制为前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>

Angular编码员建议做这样的事情的经验会怎样？对于生成如此多的代码行来做这种微妙的不同变化，我感觉不太好。

非常感谢提前。

Answer 1

所以你已经把它作为指令实现了吗？看看这个：

<强> 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>

<强> JS

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
            };
        }
    }
});

Result

也可以使用指令对象中的scope属性将属性值绑定到范围变量。但我认为这个版本更容易理解。

要显示和排序数据，您可以将ngRepeat与过滤器一起使用。如果你能提供你目前拥有的模板，我也可以帮助你。

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

1 个答案: