在 Angular 指令显示的模板之间切换答案

【问题标题】：Toggling between templates displayed by an angular directive在 Angular 指令显示的模板之间切换
【发布时间】：2015-03-08 03:20:01
【问题描述】：

我有一个显示事物列表的 Angular 应用程序

<div ng-repeat="thing in things" regular-thing>

使用 ng-repeat 实现，它为我列表中的每件事显示一个 regularThing 指令。

实际上比这要复杂一点：

<div ng-repeat-start="thing in things">
    <div ng-if="$first || thing.isSpecial" special-thing></div>
    <div ng-if="!$first && !thing.isSpecial" regular-thing></div>
</div>
<div ng-repeat-end></div>

我对列表中的第一件事使用不同的指令，也对任何“特殊”的事情使用不同的指令。出于我们的目的，当用户单击某个事物时，它会变得“特殊”——因此，当他们滚动列表时，他们可以单击某个事物以使其显示在不同的（更广泛的）模板中。

我现在拥有它的方式对我来说是错误的。一方面，我真的不需要两个不同的指令——只是不同的模板。逻辑是相同的，specialThing 只是多了一点。另一方面，出于纯粹与视图相关的原因，我在 data（即thing.isSpecial）上切换了一个属性，这让我有点死心了。

所以我的问题是：我不应该为此而死在内心深处吗？没有更干净、更“有角度”的方式来处理这个问题（即在指令模板之间切换）吗？

【问题讨论】：

根据模板的差异，如果您在单击某个组件时对某些 DOM 元素使用显示/隐藏功能可能会更好。如果您可以向我们展示模板，可能会更容易看出这是否是一个选项。
@Eyal - 这是一个很好的建议，谢谢。不幸的是，这是我已经考虑过并决定反对的，因为差异很大，有太多的表演、隐藏和切换，最终感觉像上面描述的那样更干净
这里解决了一个类似的问题，可能会给你一些想法：stackoverflow.com/questions/22448143/…我希望对你有帮助。如果我想到其他事情，我会告诉你:)

标签： javascript angularjs

【解决方案1】：

首先，没有人应该死。所以你的问题的答案是“不”。

但你确实提出了一些有趣的观点。

首先，在您的范围（或控制器，取决于您是否使用 ControllerAs 语法）中有“视图模型”信息是可以的。但是，您绝对不想将视图模型信息添加到数据模型中。以下是我可能会做的事情（使用您的 click-toggles-something-special 示例）。

<div ng-repeat-start="thing in things">
    <div ng-if="$first || isSpecial" ng-include="/specialtemplate.html" ng-click="isSpecial = !isSpecial"></div>
    <div ng-if="!$first && !isSpecial" ng-include="/regulartemplate.html" ng-click="isSpecial = !isSpecial"></div>
</div>
<div ng-repeat-end></div>

主要区别在于我将 isSpecial 属性添加到范围，而不是事物，并且 isSpecial 将特定于该特定 ng-repeat 项目的范围。

此外，除非您打算进行 DOM 操作，否则您可以在模板 html 中将它们替换为 ng-include + ng-controller。

有些人更喜欢这种模式（包括 + 控制器）而不是指令，而另一些人更喜欢继续，而另一些人更喜欢继续编写指令，因为它更“组件化”（我编造了这个词）。我认为两者都是有效的方法。

【讨论】：