Question

我的角度中有一段代码在两个文件中重复。我做了一个指令，所以它可以重复使用。我正在发送一些数据。

我们假设这是模板：

<directive1 data="object"></directive1>

这是指令1的html

<div class="a">{{data.x}}</div>
<div class="b">{{data.y}}</div>
<div class="c">{{ data.z}}</div>

现在让我们说另一个地方，我想要只有模板的上面两行。由于css完全不同，我决定创建另一个指令，而不是在指令中放置切换逻辑。

<directive2 data="similarObject"></directive2>

所以现在问题是我希望在我的指令2 html中有这个：

<div class="a">{{data.x}}</div>
<div class="b">{{data.y}}</div>

但是由于这将是重复的，我很困惑如何去做。我不想使用ng-include，因为它从客户端异步加载模板。我只想让我的代码模块化，这样HTML就不会重复了。我不介意在使用我的gulp系统构建后是否重复HTML。

编译时是否包含任何包含？因为我正在使用gulp作为我的构建系统，所以我希望这样的东西存在，这样我就可以像{J}那样做require('./something')之类的东西。

Answer 1

可以仅使用一个指令。在指令中添加一个额外的属性。

<directive1 data="object" type="page1"></directive1>

从第二页调用您需要额外样式的地方：

<directive1 data="similarObject" type="page2"></directive1>

假设额外的css代码行在 extra-css 类中。因此，我们将有条件地设置课程。

<div class="a" ng-class="{ 'extra-css' : type === 'page2' }">{{data.x}}</div>
<div class="b" ng-class="{ 'extra-css' : type === 'page2' }">{{data.y}}</div>
<div class="c" ng-if="type === 'page1'">{{ data.z}}</div>

Angular中的部分，但不是ng-include /指令

1 个答案: