0

I have menu controller on the main ('/').

I have journal button which is located at ('/users').

The journal button activates the directive template (isolated scope) with data. My goal is to add this button to the main menu. I've done by emitting from directive with rootScope.

Inserted <my-directive></my-directive> inside the main page. Inner part of the template consists of journal body components.

I've written extra style for those journal components and case when I call method to open journal on the main page.

The problem: I'm using ng-class with condition below

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

Output: one part of condition works only at all pages. Since when I'm on the main page, there is prop currentPage inside its scope, so by default users-journal-tab class applies.

How to get different classes on the same template on the different pages?

UPD: Successfully resolved this problem. The problem was in binding data of journal's directive with main menu's controller. As far as currentPage is a prop of main menu's scope. It receives String value only, i.e. 'slp-editor'. So I've used string binding option @ on currentPage prop inside of journal's directive.

David Coppus
  • 5
  • 2

1 Answers1

0

First you have to ensure, that in the scope of your directive <my-directive></my-directive> the variable currentPage is available. (If you have difficulties with this, take a look at: How to get the route name when location changes?)

Then you can do something like that in the directive's html code:

<div ng-class="{class1 : (currentPage === 'slp-editor'), class2 : (currentPage === 'another-editor'), class3 : (currentPage === 'one-more-editor')}">
    Hello World!
</div>
d4rty
  • 3,970
  • 5
  • 34
  • 73
  • Thanks, for your suggestion, dude. The thing is I'm working on a very old project basically founded on PEAN(Postgres, express, angularjs, node) stack. The routing here is based on express to dynamically manipulate data from db to front-end and vice versa. So the things got more complicated. – David Coppus Feb 08 '18 at 08:13