Question

我一直在思考这个问题，如果在双向数据绑定的情况下视图（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，你可以看到视图中的所有数据都以'parent'命名。现在我有另一个控制器说ChildController想要重用相同的html代码但数据以'child'命名。这表示此示例中的数据绑定将更改为{{child.name}}，{{child.stateCss}} ...

Angularjs绑定模型以查看类型的方式会导致很多重复的HTML代码，即使它们看起来非常相似。实际上不是Angularjs，只要你在视图文件中硬编码模型变量名以便以后渲染，服务器端MVC框架就会遇到同样的问题。

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

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

你的想法是什么？

Answer 1

Angular UI Bootstrap项目使用指令和$templateCache服务的组合来实现此目的。基本上，$templateCache预先填充了HTML模板，并提供了一个静态网址，如template/somedirective/snippetname.html。然后，该指令指定url作为其templateUrl。请查看指南的Writing Directives (Long Version)部分，或者更好的是，查看一些source code！

Answer 2

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

angularjs：多个控制器的单个html模板

2 个答案: