Question

我正在努力建立：

包含两个导航栏的页面，一个用于颜色，一个用于字母。单击颜色按钮将更改一个视图以表示该颜色。单击该字母将使不同的视图代表该字母。第三种观点应该知道颜色和字母。我也想在其中一个状态发生变化时触发警报。

我不想要硬编码的颜色或字母。我想重复使用这些模板，所以我想为颜色使用单个模板，但要根据某些颜色更改其中的内容。

路线看起来像这样： /间/ {彩色} / {信}

我找不到任何将这些碎片组合在一起的例子。我仍然只是模糊地理解hand / room / {color}的正确方法，但我不知道如何添加/ room / {color} / {letter}。另外，我对是否应该是用户href或ui-sref感到困惑。

这是我能够得到的最接近的： http://plnkr.co/edit/U7ugVfXfwUwtg7x0aBkT?p=preview

Answer 1

这是一个有效的plunker。调整后的州定义：

.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);
      }
    }
  }
})

上面的代码就像下面的部分正在使用'color@meeting'这样的绝对视图命名来定位会议状态视图......

.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);
      }
    },
  }})
;

调整后的视图定义，显示如何传递参数

<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>

angular ui-router多个嵌套和控制器数据

1 个答案: