We are currently utilizing Angular-ui-router for managing the state of our application.
One issue we are facing is that every component refreshes when there is a change in the $state, even if it's a variable that has been updated and is not used or doesn't exist in some components.
For instance, we have a TickersPanel and a TagsPanel. When a Ticker is selected, the TagsPanel should be refreshed; however, when a tag is chosen in the TagsPanel, the TickersPanel should NOT refresh but it currently does.
I've discovered that using { notify: false } as another object can resolve this issue. However, implementing this causes NO components to refresh at all.
const save = (tag, terms) => {
CONTAINER.push(tag);
$state.go('charting', Term.write(terms), { notify: false }).then((stateResult) => {
console.log('stateResult', stateResult);
});
};
Has anyone managed to find a workaround for this problem?
TagsPanel $onInit (Executes with every $state change)
this.$onInit = () => {
tagsCol.addEventListener('scroll', scrollingTags);
this.tags = [];
this.limit = 30;
const panelOpen = Dashboard.panelStatus(this.tagsOpen, this.chartMax);
panelOpen ? buildTagList() : collapsePanel();
};
TickersPanel $onInit (Executes with every $state change, but should only run if $state.params.ticker hasn't changed)
this.$onInit = () => {
this.tickers = [];
this.spy = {
longname: "SPDR S&P 500",
ticker: "SPY",
};
this.showTickersPanel = Dashboard.panelStatus(this.tagsOpen, this.chartMax);
// const currentState = $state.params;
// const prevState = Dashboard.getPreviousState();
loadTickers().then(() => this.loadingTickersDone = true);
};