angular ui-router multiple nested and controller data

Question

What I'm trying to build:

A page with two nav bars, one for color, one for letter. Clicking the color button will change one view to represent that color. Clicking the letter will make a different view represent that letter. A third view should have knowledge of both the color and letter. I also want to trigger an alert any time one of these states changes.

I don't want the colors or letters hardcoded. I want to reuse these templates, so I want to use a single template for the colors but change out what's in it based on certain colors.

The route would look like this: /room/{color}/{letter}

I'm having trouble finding any example that puts these pieces together. I still only vaguely understand the proper way to hand /room/{color}, but I have no idea to how to add /room/{color}/{letter}. Also, I'm confused on whether I should be user href or ui-sref.

Here's the closest I've been able to get: http://plnkr.co/edit/U7ugVfXfwUwtg7x0aBkT?p=preview

Answer 1

Here is a working plunker . The adjusted state definition:

.state('meeting', {
  url: "/meeting",
  templateUrl: "maintemp.html"
})
.state('meeting.color', {
  abstract: true,
  url: "/:color",
  controller: function($scope, $stateParams) {
      $scope.color = $stateParams.color;
      //alert($scope.color);
  },
  views: {
    'color': {
      template: 'This is the color: {{color}}',
      controller: function($scope, $stateParams) {
          $scope.color = $stateParams.color;
          //alert($scope.color);
      }
    },
    '': {
      template: 'This is the letter: {{letter}}',
      controller: function($scope, $stateParams) {
          $scope.letter = $stateParams.letter;
          //alert($scope.letter);
      }
    }
  }
})

The above code is as it was the below part is using absolute view naming like 'color@meeting' targeting the meeting state views...

.state('meeting.color.letter', {
  url: "/:letter",
  views: {
    'color@meeting': {
      template: 'This is the color: {{color}}',
      controller: function($scope, $stateParams) {
          $scope.color = $stateParams.color;
          //alert($scope.color);
      }
    },
    '@meeting': {
      template: 'This is the letter: {{letter}}',
      controller: function($scope, $stateParams) {
          $scope.letter = $stateParams.letter;
          //alert($scope.letter);
      }
    },
  }})
;

The adjusted view definition, showing how to pass params

<ul>
<li> <a ui-sref="meeting.color.letter({color:'blue', letter:'A'})">Blue</a></li>
<li> <a href="#/meeting/blue/a">OR BLUE</a></li>
<li> <a ui-sref="meeting.color.letter({color:'green', letter:'A'})">Green</a></li>
<li> <a href="#/meeting/green/b">OR GREEN</a></li>
</ul>

<div ui-view='color'></div>

<li> <a ui-sref="meeting.color.letter({color:'blue', letter:'A'})">blue A</a></li>
<li> <a ui-sref="meeting.color.letter({color:'red', letter:'B'})">red B</a></li>
<div ui-view></div>