Javascript-角度UI路由器多个嵌套和控制器数据

2019-11-21 17:37:30 阅读：229 来源： 互联网

标签：angularjs angular-ui-router angular-ui javascript

我正在尝试构建：

带有两个导航栏的页面,一个用于颜色,一个用于字母.单击颜色按钮将更改一个视图以表示该颜色.单击字母将使代表该字母的视图不同.第三个视图应同时具有颜色和文字知识.每当这些状态之一发生变化时,我也想触发警报.

我不想对颜色或字母进行硬编码.我想重复使用这些模板,因此我想为颜色使用单个模板,但要根据某些颜色更改其中的内容.

路线如下所示：
/ room / {color} / {letter}

我很难找到将这些部分组合在一起的任何示例.我仍然只是模糊地理解处理/ room / {color}的正确方法,但是我不知道如何添加/ room / {color} / {letter}.另外,我对于应该是用户href还是ui-sref感到困惑.

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

解决方法:

这是一个有效的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>

标签：angularjs,angular-ui-router,angular-ui,javascript
来源： https://codeday.me/bug/20191121/2053321.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Javascript-角度UI路由器多个嵌套和控制器数据