Question

我正在尝试设置我的第一个（适当的）SPA AngularJS应用程序，该应用程序将有两个数据表来过滤两个不同联盟的结果。目前我可以为A联赛和联赛B显示两个表，但是他们显示了两个联赛的所有结果，因为他们使用相同的模板。

我的模板页面包含一个包含以下ng-repeat标记的表：

<tr ng-repeat="fixtures in items | filter:{ FixtureLeague: 'League A'}" id="fixtures_{{fixtures.Id}}">

从主页面中的ng-view div调用。我开始考虑使用指令来指定/将数据传递到模板中，但我不确定如何实际工作。

//Directive - Fixtures
FixturesApp.directive('cFixture', function () {
    return {
        template: '<tr ng-repeat="fixtures in items | filter: { FixtureLeague : "League A"}" id="fixtures_{{fixtures.Id}}">',
        replace: true,
        transclude: true,
        restrict: 'E',
        scope: {
            tree: '=ngModel'
        }
    };
});

是否有任何关于如何重复使用模板并向其传递不同参数的示例或有关如何实现此目的的建议？

Answer 1

为您的指令添加值：

<c-fixture league='League A' ng-Model="..."></c-fixture>

FixturesApp.directive(`cFixture`, function(){
    return {
        template: [
                    '<tr ng-repeat="fixtures in items" | filter: { FixtureLeague: league}',
                    'id="fixtures_{{fixtures.Id}} >"'
                  ].join(' '),

        replace: true,
        scope: {
            league: '@',
            items: '=ngModel'
        },
        restrict: 'E'
    }
})

您的指令存在问题：您正在创建隔离范围scope: {...}，并将ngModel的值复制到名为tree的属性。无论如何，你没有传递items的任何值，所以你的ngRepeat将无法正常工作。我在实现中假设您要将项目集合作为ngModel传递。否则解释一下，我会纠正它。

就不同的联赛而言，我将联盟作为league属性的字符串参数传递给过滤器。 league属性作为字符串league: @插入范围。

无论如何，我不是使用过滤器来显示两个不同的联赛收藏，而是在模型上创建两个不同的阵列，因为过滤器需要遍历所有桌面的所有联赛，并且它看起来效率不高。 / p>

如何在同一页面上重用AngularJS模板

1 个答案: