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

Question

我在主界面上有菜单 Controller ('/') .

我有位于 ('/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:成功解决了这个问题。问题在于将日志指令的数据与主菜单的 Controller 绑定(bind)在一起。至于currentPage是主菜单范围的 Prop 。它只接收字符串值，即 'slp-editor' .所以我使用了字符串绑定(bind)选项 @在 currentPage prop 在期刊的指令中。

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>