1

我一直在思考这个问题，鉴于在双向数据绑定的情况下视图（html）绑定到控制器，在 angularjs 中重用 html 模板的最佳做法是什么？

例如：

<a ng-repeat="(uuid, parent) in pageData.parents" class="list-group-item list-group-item-padding"  ng-click="click(parent.uuid)">
    <table class="table-grid">
        <tbody>
        <tr>
            <td>
                {{parent.name}}
            </td>
            <td>
                <span class="pull-right {{parent.stateCss}} state-label-font">{{parent.state}}</span>
            </td>
        </tr>
        </tbody>
    </table>
</a>

在上面的代码片段中，视图绑定到某个控制器，比如 ParentController，您可以看到视图中的所有数据都以“父级”命名。现在我有另一个控制器说 ChildController 想要重用相同的 html 代码，但数据以“孩子”命名。也就是说，本例中的数据绑定将更改为 {{child.name}}, {{child.stateCss}} ...

Angularjs 将模型绑定到视图的方式会导致大量重复的 html 代码，即使它们看起来非常相似。其实不是 Angularjs，服务器端 MVC 框架也有同样的问题，只要你在视图文件中硬编码模型变量名称以供以后渲染。

我看到一些不使用 MVC 的 Web 应用程序有一些 html 代码设置页面的基本骨架，然后使用 JQuery 动态提供数据以编程方式查看。这种 JQuery 方式不是我的偏好，但它确实节省了大量的 html 代码，我认为这个应用程序相当复杂，只是因为 ~1000 个 html 代码完成了 ~10 个子页面、列表、向导等任务......

在 angularjs 中，我可以想象的一种解决方案是用自定义指令替换视图中的模型变量，以在运行时更改它们的范围/控制器。或者有一个指令接收一个配置对象，该对象在编译时生成 html 元素绑定到配置的控制器/范围。

你的想法是什么？

4

2 回答 2

2

Angular UI Bootstrap项目使用指令和服务的组合来实现这一点$templateCache。本质上，$templateCache它预先填充了 HTML 模板并给出了一个静态 url，如template/somedirective/snippetname.html. 然后，该指令将该 url 指定为其 templateUrl。看看指南的写作指令（长版）部分，或者更好的是，看看一些源代码！

于 2013-09-12T02:14:46.227 回答
0

我认为对于 html 的重用，正确的解决方案是制作自定义指令。一开始它们有点困难，但你可以通过它们获得很多生产力。

于 2013-09-12T02:08:19.363 回答