如何将样式应用于发出的指令模板？

Question

我在主 ('/') 上有菜单控制器。

我有位于('/users') 的日记按钮。

日志按钮使用数据激活指令模板（隔离范围）。我的目标是将此按钮添加到主菜单。我已经通过使用 rootScope 发出指令来完成。

在主页内插入<my-directive></my-directive>。模板的内部由日志体组件组成。

当我在主页上调用方法打开日记时，我已经为那些日记组件和案例编写了额外的样式。

问题：我正在使用具有以下条件的 ng-class

<div class="" ng-if="isOpenTab" ng-class="currentPage === 'slp-editor' ? 'editor-journal-tab': 'users-journal-tab'">

输出：条件的一部分仅适用于所有页面。因为当我在主页上时，它的范围内有 prop currentPage，所以默认情况下 users-journal-tab 类适用。

如何在不同页面的同一模板上获取不同的类？

UPD：成功解决了这个问题。问题在于将日志指令的数据与主菜单的控制器绑定。至于currentPage 是主菜单范围的道具。它只接收字符串值，即'slp-editor'。所以我在期刊指令中的currentPage 属性上使用了字符串绑定选项@。

Answer 1

首先，您必须确保在您的指令<my-directive></my-directive> 的范围内，变量currentPage 是可用的。 （如果您对此有困难，请查看：How to get the route name when location changes?）

然后你可以在指令的html代码中做类似的事情：

<div ng-class="{class1 : (currentPage === 'slp-editor'), class2 : (currentPage === 'another-editor'), class3 : (currentPage === 'one-more-editor')}">
    Hello World!
</div>