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是一个问题...这可以通过创建角度指令和重做以前的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＆amp; myLiDirective.html。

如果我将在多个页面中使用my-li-directive，我会得到这种方法，但在这个特定情况下，我的目标是删除重复的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更具可读性和可维护性，而且所有内容都在一个地方/文件中。

Answer 1

这是一种有选择性的问题，但你不会失去任何东西。

指令对于构建更多“类似组件”的结构非常有用，并且每个实例都有一个控制器。但是，看起来你不需要任何这些，你只是想以一种漂亮的方式进行代码复制，所以它解决了你的问题。你不会失去任何东西。

唯一的缺点是你的控制器（你存储每个列表项的信息）将存储一个数组并对一个项目采取行动，你将不得不进行搜索以找到正确的对象 - 和甚至可以避免 - 而不是带有关联控制器的指令，其中函数的代码更具可读性（只是一点点）。

无论如何，我认为这并没有打破任何Angular最佳实践场景=）

Answer 2

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

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

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

<my-banner-directive>

，如果在不同的地方重复，这是非常好的，然后在你的指令中写出模板及其中包含的所有信息。我认为它更简洁，更清洁，而不是必须多次重复，如果你把它放在不同的地方，你也应该避免使控制器混乱，因为它们应该尽量少。

总而言之，如果它只是布局的一部分中使用的一小部分，那么拥有一个特殊的解决方案没有错，就像你现在拥有它一样！

Answer 3

好的，这实际上是使用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>

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

3 个答案: