Html AngularJS中的重复内容（子模板）

我有一个模板，其中包含（部分）完全相同的内容，重复了两三次，对绑定做了细微的更改，例如：

<div class="xyz-state0" data-ng-hide="data.error || !data.states[0].name">
    <div class="xyz-content">
        <img data-ng-src="{{data.states[0].image}}" width="48" height="48">
        <span>{{data.states[0].name}}</span>
    </div>
</div>
<div class="xyz-state1" data-ng-hide="data.error || !data.states[1].name">
    <div class="xyz-content">
        <img data-ng-src="{{data.states[1].image}}" width="48" height="48">
        <span>{{data.states[1].name}}</span>
    </div>
</div>

---

我怀疑我可能可以用一个定制的控制器来实现，但这似乎也是一个沉重的解决方案。正确的方法是什么™?

这几乎是定制指令的教科书案例。定义一个指令，然后您就可以

<state ng-repeat="item in data.states" item="item">.

。

或者，如果自定义指令过多（主要取决于您是否在其他地方重用该视图组件），您可以在整个div上放置一个ng repeat。唯一真正的问题是class=“xyz stateN”内容，但我打赌您可以通过ng类的使用来弥补

编辑：

如果执行ng repeat，则可以只使用$index键（只要始终从零开始计数，并且state类与索引相同）。差不多

<div ng-class="{{'xyz-state'+$index}}" ng-repeat="state in data.states" data-ng-hide="data.error || !state.name">
    <div class="xyz-content">
        <img data-ng-src="{{state.image}}" width="48" height="48">
        <span>{{state.name}}</span>
    </div>
</div>

{{state.name}

---

可能会很好。尽管如此，在我看来，制定一个指令几乎总是值得的。代码总是被循环使用，另外，如果名称空间和模块化让你感到紧张的话，你可以谨慎使用它们。

好吧，这似乎可以解决问题（感谢你的提示）。我仍然不完全满意它，因为该指令是在全球注册的，而我真的只希望它在这一个地方

state.tpl.html:

<div class="xyz-content" data-ng-show="state.name">
    <img data-ng-src="{{state.image}}" width="48" height="48" />
    <span>{{state.name}}</span>
</div>

    <div data-xyz-state="data.states[0]" class="xyz-state0"
         data-ng-hide="data.error"></div>
    <div data-xyz-state="data.states[1]" class="xyz-state1"
         data-ng-hide="data.error"></div>

app.directive('xyzState', [function() {
    return {
        templateUrl: 'state.tpl.html',
        scope: {
            state: '=xyzState',
        },
    };
}]);

---

有趣的是，如果我试图将引入元素声明为

，而不是

，这是行不通的，尽管文档说这应该也行。我假设这里有某种验证的干扰。

仅供参考，我后来重新研究了这段代码，并决定这样做：（我让我的原始答案保持不变，因为这更像我最初要求的，在不同的情况下，它们似乎都是合理的。）

view.tpl.html

    <div data-ng-repeat="state in data.states" data-ng-if="!data.error"
         data-ng-class="state.class">
        <div class="xyz-content" data-ng-show="state.name">
            <img data-ng-src="{{state.image}}" width="48" height="48" />
            <span>{{state.name}}</span>
        </div>
    </div>

{{state.name}

app.js

...
while ($scope.data.states.length < 2)
    $scope.data.states.push({});
$scope.data.states[0].class = 'xyz-state1';
$scope.data.states[1].class = 'xyz-state2';
...

。。。
而（$scope.data.states.length<2）
$scope.data.states.push（{}）；
$scope.data.states[0]。类='xyz-state1'；
$scope.data.states[1]。类='xyz-state2'；
...

我对另一个（3项）案例做了类似的操作，除了在那里，因为我想重新排列项目的顺序，我在控制器中为所需的顺序添加了一个

order

属性，然后在视图中使用

data ng repeat=“button in data.buttons | orderBy:'order'

---

这确实意味着一些视图定义（显示顺序和CSS类）已泄漏到控制器中，但我认为代码清晰的好处大于此。

我认为您需要重新阅读我的问题。我已经提到，它不会在其他地方使用，而且ng repeat不能满足我的需要。我同意ng repeat的解决方案。您的问题似乎更多的是数组而不是视图。如果您专注于使用自定义（或预构建）过滤器以正确的顺序/格式创建状态数组，您可能会得到一个巧妙的解决方案。如果您想将其用作元素而不是属性，则需要执行

restrict:'E'

。请记住，如果您真的将states[0]设置为state0等等，那么可以通过编程方式设置该类。请查看ng类。我使用了

ng类

在其他一些上下文中以编程方式设置类，但我不确定它在这里会有什么帮助。除非你建议像

ng class=“{'xyz-state0'：$index==0，'xyz-state1'：$index==1}”

——我认为这比我的可读性要差得多。（尽管我承认这将允许我在这种情况下使用

ng repeat

，但另一种情况除外。）

...
while ($scope.data.states.length < 2)
    $scope.data.states.push({});
$scope.data.states[0].class = 'xyz-state1';
$scope.data.states[1].class = 'xyz-state2';
...