How can one handle sticky states directives that are currently inactivated?

[nirdil]

Given that sticky states' DOM is preserved as hidden using a code like this: <div ui-view name="content" ng-show="$state.includes('root.section')"></div> How can one suspend any code execution related to that state? E.g. let's say I have some directive that is used in different states and that directive is registered to different events like window resize, etc. If that directive is used within a sticky state, and that state becomes inactive, the directive still gets those events. How can I know within the directive that it belongs to an inactivated state?

My current workaround is to access from the directive to the view's scope and check a variable which i maintain on it, like this: Within the directive: scope.$parent.$parent.ControllerActive Within the view's controller: $scope.$on("$stateChangeSuccess", function (event, currentState, previousState) { $scope.ControllerActive = $state.includes('root.section'); } });

This seems both hacky and badly designed as this results in none-self-sufficient and unmodular directive... I'm not that proficient in web development... Am I missing something?

[christopherthielen]

The whole point of sticky states it to keep the DOM around while the state is inactive. Some developers don't even hide the inactive views when the state is inactive, but rather show all the views at the same time.

If you want to disable some logic when a state is inactive, you will have to write custom code for that.

In angular, you can write a directive similar to ng-show which toggles the element visibility, and then broadcasts an event ($scope.$broadcast) to its children. The children directives that care about active/inactive could then listen to the event ($scope.$on) and change their behavior.

[nirdil]

Yea that's what I ended up doing, wrote a directive to broadcast inactive states to children directives. Thanks for the answer, and thanks for this great project.