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

我一直在思考这个问题，在双向数据绑定的情况下，如果视图（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>

{{parent.name}
{{parent.state}

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

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

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

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

---

您的想法是什么？

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

该项目通过结合使用指令和

$templateCache

服务来实现这一点。本质上，

$templateCache

预先填充HTML模板，并提供一个静态url，如

template/somedirective/snippetname.HTML

。然后，该指令将该url指定为其templateUrl。看一看指南的部分，或者更好，看一些

对。AngularUI是重用的一个例子，对话框是一个很好的例子。看来重用是一个高级的话题，不容易掌握