使用 AngularJS 生成无指令的可重复 HTML 块

Question

假设我有需要显示的元素列表。 HTML 我的要复杂得多，但为了简单起见，让我们使用这个：

<ul>
    <li>
        <div class="centered">
            <a href="#"><img src="/assets/img/icons/facebook.png" width="50" height="50" alt=""></a>
        </div>
    </li>
    <li>
        <div class="centered">
            <a href="#"><img src="/assets/img/icons/twitter.png" width="25" height="25" alt=""></a>
        </div>
    </li>
    <li>
        <div class="centered">
            <a href="#"><img src="/assets/img/icons/google.png" width="30" height="30" alt=""></a>
        </div>
    </li>
</ul>

现在，显然复制 HTML 是一个问题...这可以通过创建 angular 指令并重做之前的 HTML 片段来解决：

<ul>
    <my-li-directive icon="facebook.png" width="50" height="50">
    <my-li-directive icon="twitter.png" width="25" height="25">
    <my-li-directive icon="google.png" width="30" height="30">
</ul>

问题在于，为了实现它，我需要再创建 2 个额外的文件 - myLiDirective.js 和 myLiDirective.html。

如果我将在多个页面中使用 my-li-指令，我会采用这种方法，但在这种特定情况下，我的目标是仅删除重复项 HTML。如果我使用 AngularJs 指令，我得到的是我稍微增加了复杂性 - 更多文件，如果我不捆绑 myLiDirective.html，另一个 HTTP 请求，等等 - 可以解决的问题，但无论如何都是问题。

所以，我可以不做指令，而是做类似的事情：

<script>
    var loginButtons = [
        {icon: "facebook.png", width:50, height:50},
        {icon: "twitter.png", width:25, height:25},
        {icon: "google.png", width:30, height:30}
    ]
</script>
<ul>
    <li ng-repeat="btn in loginButtons">
        <div class="centered">
            <a href="#"><img src="/assets/img/icons/{{btn.icon}}" width="{{btn.width}}" height="{{btn.height}}" alt=""></a>
        </div>
    </li>
</ul>

我知道这是一种有点非正统的方法 - 但我会因此失去任何东西吗？它确实使 HTML 更具可读性和可维护性，而且一切都在一个 place/file 中。

Answer 1

这是一种自选题，但不会有任何损失。

指令对于构建更多 "component-like" 结构非常有用，并且每个实例都有一个控制器以及所有这些。但是，似乎您不需要任何这些，您只需要以一种漂亮的方式进行代码复制，因此它可以解决您的问题。你不会失去任何东西。

唯一的缺点是您的控制器（您在其中存储每个列表项的信息）将存储一个数组并对单个项目执行操作，您必须进行搜索才能找到正确的对象- 甚至可以避免 - 而不是带有关联控制器的指令，其中函数代码更具可读性（只是一点点）。

无论如何，我认为这不会破坏任何 Angular 最佳实践场景 =)

Answer 2

好的，这实际上是使用 ASP.NET Razor 的完美情况：

@{
    var loginButtons = new [] {
        new {icon="facebook.png", width=50, height=50},
        new {icon="twitter.png", width=25, height=25},
        new {icon="google.png", width=30, height=30}
    };
}
<ul>
    @foreach (var btn in loginButtons) {
        <li ng-repeat="btn in loginButtons">
            <div class="centered">
                <a href="#"><img src="/assets/img/icons/@btn.icon" width="@btn.width" height="@btn.height" alt=""></a>
            </div>
        </li>
    }
</ul>

Answer 3

你不需要引入2个额外的文件，也可以简单地将模板html写在一个指令中，虽然它可能是自以为是，但我认为最好直接写在如果 html 很小并且属于较大的布局，则指令而不是创建额外的 html 文件。

此外，您不需要创建新的指令文件，只需将其包含在使用它的布局文件的较大部分中（除非您在网站的不同位置有特定的横幅广告模板，在在这种情况下，最好还是使用一个指令，因为你想要以 DRY 为目标。

在您的 html 中，它看起来就像

<my-banner-directive>

，如果在不同的地方重复就好了，然后在你的指令中写出模板和其中包含的所有信息。我认为它更简洁明了，而不是必须重复多次，如果你把它放在不同的地方，你也可以避免弄乱控制器，因为它们最好尽可能少。

综上所述，如果是一小部分只用于布局的一部分，那么有一个特殊的解决方案没有错，就像你现在有的那样！

使用 AngularJS 生成无指令的可重复 HTML 块

Using AngularJS for generating repeatable HTML blocks without directives

asp.net

asp.net-mvc

razor

angularjs

angularjs-directive