Angularjs 角度分组指令起始点

我正在尝试用几个预定义的过滤器创建一个分组和过滤机制。我有一组未定义的规则和一些预定义的分组操作，例如“relativeDate”（今天、明天、昨天、本周……）、“boolean”或。操作集应该是可扩展的

我已经设法让它在控制器中工作。但我想将其外包到一个指令中，以使其与其他对象集合一起工作。问题是：我需要动态指定列表的模板

想象一下以下集合：

$scope.memosReceived = [
     { id: 1, from: 'Henry Ford', title: 'Want your Model T?', received: '2015-05-04T12:30:00', read: true },
     { id: 2, from: 'Oliver Newton', title: 'Look at this!', received: '2015-06-15T08:00:00', read: true }
     ...
];

$scope.memosSent = [
     { id: 1, to: 'Henry Ford', title: 'That is an old car', sent: '2015-05-04T12:35:21', read: true },
     { id: 2, to: 'Oliver Newton', title: 'Stop Spam', sent: '2015-06-15T08:01:47', read: false }
     ...
];

现在，标记应该如下所示：

<div ng-controller="controller">
    <h2>Received</h2>
    <grouped-list ng-model="memosReceived" item-var="received" grouping-options="groupingReceived">
        <h2>{{ received.title }} <sub>by {{ received.from }}</h2>
    </grouped-list>

    <h2>Sent</h2>
    <grouped-list ng-model="memosSent" item-var="sent" grouping-options="groupingSent">
        <h2>{{ sent.title }} <sub>to {{ sent.to }}</h2>
    </grouped-list>
</div>

呈现的HTML应类似于“伪HTML”：

收到
您可以创建一个自定义筛选器，并从指令的控制器调用它

在这个过滤器内部，您可以通过向过滤器传递参数来决定应该触发哪个过滤器操作

我会从控制器而不是模板调用它，因为在那里你可以更容易地链接你的过滤器

请看一下下面的演示或本演示

在将代码添加到的过程中，我在使用较新AngularJS版本的代码中检测到一个bug（未显示该项）。不确定它是什么，但在1.2.1中它正在工作。
我稍后再查。似乎是一个范围问题


angular.module（'demoApp'，[]）
.filter（'aw-group'，函数（$filter）{
变量筛选方法={
relativeDate：功能（输入、操作）{
log（'调用的相对日期'，输入）；
返回输入；//在此处转换为相对日期
},
filterByNumber:函数（输入、操作、选项）{
//如果需要mor参数
返回$filter（'filter'）（输入，options.number）；
},
其他筛选器：{
}
};
返回功能（输入、操作、选项）{
返回筛选器方法[操作]（输入、操作、选项）；
};
})   
.directive（'groupedList'，函数（）{
返回{
限制：'E'，
范围：{
型号：'='，
itemVar:“=”，
筛选器：'='
},
是的，
模板：'
'+
“
”，
控制器：函数（$scope$filter）{
//log（$scope.filter）；
$scope.filteredModel=$filter（'aw-group'）（$scope.model，'filterByNumber'，{number:2}）；//将$scope.filter.action中的操作作为第二个参数传递，第三个是选项对象
}
};
})
.controller（'mainController'，函数（）{
此参数。数据=[{
标题：“Test1”，
来自：“tester1”
}, {
标题：“Test2”，
来自：“tester1”
}, {
标题：“Test3”，
来自：“tester1”
}, ];
this.groupingReceived=[{
modelKey:'已接收'，
行动：'相对论'，
选项：{}，
modelKey:'读取'，
动作：'布尔'，
选项：{}
}];
此.memosReceived=[{
id:1，
出自《亨利·福特》，
标题：“想要你的T型车吗？”，
收到：“2015-05-04T12:30:00”，
读：对
}, {
id:2，
摘自《奥利弗·牛顿》，
标题：“看这个！”，
收到：“2015-06-15T08:00:00”，
读：对
}];
});

{{item.title}{{item.from}}
这就是问题所在。ng transclude在较新版本中无法使用ng repeat。我也试过同样的方法。好的，谢谢你指出这个问题。我已经更新了相同的JSFIDLE。请看一看。它正在工作。如果我没有正确理解，新指令将
ng repeat
作用域注入转换作用域。我已经从一个讨论这个问题的plunkr中获取了代码。
$scope.groupingReceived = [
    { modelKey: 'received', action: 'relativeDate', options: { [.. passed to grouping action, like value->name mapping ..] },
    { modelKey: 'read', action: 'boolean', options: { [...] } }];

$scope.groupingSent = [
    { modelKey: 'sent', action: 'relativeDate', options: { [.. passed to grouping action, like value->name mapping ..] },
    { modelKey: 'read', action: 'boolean', options: { [...] } }];

<div ng-controller="controller">
    <h2>Received</h2>
    <div class="grouped-list">
        <div class="filter-section">
            <button ng-click="openFilters = !openFilters>Open Filters</button>
            <div class="filter-options" ng-hide="!openFilters">
                <h4>Group by</h4>
                [selectbox given group actions] [selectbox sort ascending or descending]
                <h4>Filter by</h4>
                [build filters by similar to group actions given filter actions]
            </div>
        </div>
        <div class="group">
            <div class="group-header">
                <h3>Yesterday</h3>
            </div>
            <ul class="group-list">
                <li ng-repeat="received in ngModel | customFilters">
                    <!-- something like transclusion starts here -->
                    <h2>{{ received.title }} <sub>by {{ received.from }}</h2>
                    <!-- something like transclusion ends here -->            
                </li>
           </ul>
        </div>
        <div class="group">
            <div class="group-header">
                <h3>Last Week</h3>
            </div>
            <ul class="group-list">
                <li ng-repeat="received in ngModel | customFilters">
                    <!-- something like transclusion starts here -->
                    <h2>{{ received.title }} <sub>by {{ received.from }}</h2>
                    <!-- something like transclusion ends here -->            
                </li>
            </ul>
        </div>
    </div>

    <h2>Sent</h2>
    <div class="grouped-list">
        [... same like above ...]
    </div>
</div>