I'm a junior AngularJS developer, and I'm looking for the right way to implement a toolbar I'm making. Currently my application works on many levels, having:
app - the root of the angular application and multiple app.sub-level(s) - with different levels of nestation.
Point is on the app module I have some partial views (one of them being toolbar), addressed in my controller under the views of my abstract app state.
What I wish to do is to change the behaviour of the buttons in my controller (e.g. appearance of the "delete" button) depending on the state of my app.sub-level (.state)
What would the right way to do it be?
I've read about using $rootScope, which would be (as far as I've understood) not suggested, due to it being really close to a global variable.
I've read about using a service too, but the service doesn't change if I just change the variable inside it.
So, is there any right way to do this?
Thanks in advance, and sorry for the long post, i'm trying to explain as good as I can!
EDIT: I have to assign different behaviours to the buttons too (both ng-ref and whole functions)
For appearance, use ng-class. For example:
<button ng-class="{dull: sub-level.state==0, shiny: sub-level.state!=0}">
</button>
This example would set a class on the button: dull when sub-level.state is 0, and shiny otherwise. These classes need to be defined in your CSS.
Note that sub-level.state would need to be a $scope accessible variable in this example. (i.e. $scope.sub-level.state must exist in the relevant controller )
This will merely affect the appearance of the button. Look into ng-disabled if you want to actually disable it based on some expression.