Issue
I'm using UI-Router for Angular and I have separated views for my app: sidebar and main. Now i need to change some class in main view after some action that does in sidebar view.
So, this is my code:
config
.state('app.area', {
url: '/area/:areaId',
views: {
'@': {
template: require('./app/generic/genericWithSidebar.html'),
controller: 'AreaCtrl'
},
'main@app.area': {
template: require('./app/area/_area.html'),
controller: 'AreaCtrl',
controllerAs: 'CTRL',
},
'sidebar@app.area': {
template: require('./app/area/_sidebar.html'),
controller: 'AreaCtrl',
controllerAs: 'CTRL',
}
},
controller
class AreaCtrl {
constructor($scope) {
"ngInject";
this.$scope = $scope;
this.$scope.descriptionIsActive = false;
}
showAreaDescription() {
this.$scope.descriptionIsActive = !this.$scope.descriptionIsActive;
}
}
export default AreaCtrl;
and views for sidebar and main
// sidebar view
<span ng-click="CTRL.showAreaDescription()">show more</span>
// main view
<div ng-class="{'active': CTRL.descriptionIsActive}"></div>
I need to communicate between views, not controllers, i have one controller.
Solution
The "correct" solution depends on what it is that changed in your main view that causes a change in the navigation.
As I just answered here, it is generally a bad sign if you need controllers to "talk" to each other. This often means that you should have a service
that takes care of the data/state that you want to bind to in both views.
If, however, your change is really just a global cosmetic navigational thing (I can not think of an example but I do not want to say that thats impossible), a "global" NavigaitonController
(on your body
for example) might be correct. I doubt it though.
So my suggestion is: Think about what data causes the change, handle the state of that data in its own service and bind to that service property where you need it.
Answered By - LionC
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.