AngularJS:HTML模板的继承

Question

题:

如何防止类似HTML模板中的代码复制？

描述

我有相同的视图/指令的几个不同的模板,我想根据环境改变.模板大部分相同,但包含一些需要根据环境进行更改的部分.

例:

输入userdata的视图对于管理员可能如下所示:

<p> Username: </p>
<input ng-model="ctrl.username"></input>

<p> Firstname: </p>
<input ng-model="ctrl.firstname"></input>

<p> Lastname: </p>
<input ng-model="ctrl.lastname"></input>

<p> Authorization-level: </p>
<input ng-model="ctrl.authlevel"></input>

但是,我需要向用户显示基本相同的视图,而不允许他更改其授权级别:

<p> Username: </p>
<input ng-model="ctrl.username"></input>

<p> Firstname: </p>
<input ng-model="ctrl.firstname"></input>

<p> Lastname: </p>
<input ng-model="ctrl.lastname"></input>

<p> Authorization-level: </p>
{{ctrl.authlevel}}

我想防止重复两个模板的代码.

可能的解决方案:

NG-如果

显然,我可以ng-if根据条件在模板中交换html块.但是,这不能很好地扩展.上面的例子很简单,但想象一下我有5-10个不同版本的模板.使用此模板的版本数量,代码变得越来越难以阅读.另外,我希望阻止将admin-view的代码发送给用户,如果它包含在同一个html文件中,我就不能这样做.

自定义指令

我可以将每个需要在其自己的指令中替换的HTML节点包装起来.这将保持主模板清洁,我可以根据环境交换指令的HTML模板.但是,所有这些附加指令都会导致大量的样板代码.

(这似乎最接近Angular2的组件)

第三方库角度块

我发现角度块似乎正在解决我想要解决的问题.但是,它看起来并不是很受欢迎,并且在查看实现时我担心这可能会导致大型应用程序出现性能问题(由于多个嵌套$compile调用).

我有什么选择吗？你知道任何最佳实践或风格指南吗？

Answer 1

是什么阻止您将顶部部分包裹在它自己的模板中？当动态内容位于静态内容上方或旁边时，此方法有效。

用户信息模板.html

<p> Username: </p>
<input ng-model="ctrl.username"></input>

<p> Firstname: </p>
<input ng-model="ctrl.firstname"></input>

<p> Lastname: </p>
<input ng-model="ctrl.lastname"></input>

用户视图.html

<user-info></user-info>
<p> Authorization-level: </p>
{{ctrl.authlevel}}

管理视图.html

<user-info></user-info>
<p> Authorization-level: </p>
<input ng-model="ctrl.authlevel"></input>

当动态内容是静态内容的子级时，此方法有效：

用户信息模板.html

<div>
    <p> Username: </p>
    <input ng-model="ctrl.username"></input>

    <p> Firstname: </p>
    <input ng-model="ctrl.firstname"></input>

    <p> Lastname: </p>
    <input ng-model="ctrl.lastname"></input>

    <!--Note that this dynamic piece is a child, so (as you noted)
    the above approach won't work-->
    <dynamic-piece></dynamic-piece>
</div>

动态-piece-user.html

<p> Authorization-level: </p>
{{ctrl.authlevel}}

动态-piece-admin.html

<p> Authorization-level: </p>
<input ng-model="ctrl.authlevel"></input>

我相信基于组件的方法足够灵活，可以适应大多数情况。然而，对于某些事情来说这可能有点过分了。我（作为一个新手 Angular 开发人员）倾向于开始使用 ng-ifs，当事情变得太复杂时，我会将其分解为组件。我建议你这样做。一旦掌握了将组件重构为不同组件的窍门，这确实是一个顺利的工作流程。