#StackBounty: #javascript #angularjs #routing #angular-ui-router #state-management How to pass $state variable into 2 other sibling $st…

Bounty: 200

Plnkr: https://plnkr.co/edit/Brmcxd2LjGVJ6DXwuJtF?p=preview

Architecture:

$login -> $container (contains $dashboard and $feed), dashboard contains: $tickers, $tags, $viewHeader and $socialMedia components.

Goal:

tags needs to communicate and send a tag object into the viewHeader and socialMedia states.

Expected:

After Login, selecting a button in the Tags list should send that tag into the ViewHeader and SocialMedia states/components.

Results:

After Login, selecting a button in the Tags and going to $state dashboard the $states for the ViewHeader and SocialMedia refresh but the view model variable {{ term }} does not update with the appropriate tag in either component.

enter image description here

Design explanation:

The reason I’m trying to use a mix of states, components, sibling components and views is that I’m trying to solve a problem I have where I do not want every single component re-init when something in the state changes.

IE: When I select a Ticker or a Tag I do NOT want the Feed component to refresh every single time. However the user should be able to take an action in the Feed component and it will update all the others.

This is why I created a container state to hold both the dashboard and feed states. Originally I had everything in the dashboard state, and anything $state.go('dashboard' happened the feed component would also refresh. If there is a better way to solve this issue lmk! 🙂

enter image description here


In this screenshot below I can clearly see that the correct tag is being passed into the correct $states, but yet {{ term }} does not update.

enter image description here

enter image description here

The click function in the Tags list:

$scope.clickTag = function(tag) {
  console.log(' Tag clicked', $state);
  $state.go('dashboard', { tag: tag });
}

socialMedia controller:

social.component('socialModule', {
  templateUrl: 'social-module-template.html',
  controller: function($scope, $state) {
    console.log('Social component', $state.params);
    $scope.term = $state.params.tag.term;
  }
});

viewHeader controller:

view.component('viewModule', {
  templateUrl: 'view-module-template.html',
  controller: function($scope, $state) {
    console.log('View component', $state.params);
    $scope.term = $state.params.tag.term;
  }
});

Strange doubling up of components

Just noticed this, after clicking on a tag and breaking inside of the social.component. It looks like the dashboard component is being re-rendering in place of the tags component for a split second:

enter image description here


Get this bounty!!!