Nasted 命名视图未显示在 angularjs $stateProvider中

Question

我正在尝试按标签显示 2 个不同的块。 但是子视图没有显示， 这是我的代码：

我想用来选择要显示的部分。

 $stateProvider
            .state('route1', { 
                url: "/route1",
                templateUrl: "route1.html" 
            }) 
              .state('route1.list', {
                  url: "/list/:id", //the URL will be: route1/list
                  views:{
                  '':{  
                  templateUrl: "route1.list.html",
                  controller: function($scope,$stateParams){
                    $scope.items = ["I am", "from", "Insperity", "Items"];
                   // console.log($stateParams.id);
                    $scope.parentid=$stateParams;
                  }
                  },
                  '[e-mail]':{
                    templateUrl:'money.html',
                     controller: function($scope,$stateParams){
                   console.log($scope.parentid);
                  }
                  },
                  '[e-mail]':{
                    templateUrl:'detail.html'
                  }`enter code here`
                  }
              })
    Html for route1.list.html :
    <h3>List of Route 1 Items</h3>
    <ul>
      <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <a ui-sref="money">go to money</a>
    <a ui-sref="details">go to details</a>
    <div ui-view></div>
    but if I change my html to this: (it works, but not the way I want)
    <h3>List of Route 1 Items</h3>
    <ul>
      <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <div ui-view='money'></div>
    <div ui-view='details'></div>

对这个问题有任何想法吗？

Answer 1

一种方法可能是将money和detail子状态设置为我们list状态。有一个工作弹道

机

这将调整状态定义：

 ...
 .state('route1.list', {
    url: "/list/:id", //the URL will be: route1/list
    views: {
      '@': { // targeting index.html ui-view=""
        templateUrl: "route1.list.html",
        controller: function($scope, $stateParams) {
          $scope.items = ["I am", "from", "Insperity", "Items"];
          // console.log($stateParams.id);
          $scope.parentid = $stateParams;
        }
      },
    }
  })
  .state('route1.list.money', {
    url: "/money", 
    template: "<div>this is money</div>",
    controller: function($scope, $stateParams) {
          console.log($scope.parentid);
      }
    })
  .state('route1.list.detail', {
    url: "/detail", 
    template: "<div>this is a detail</div>"
  })

这将在route1.list.html进行调整

<div>
  <h3>List of Route 1 Items</h3>
  <ul>
    <li ng-repeat="item in items">{{item}}</li>
  </ul>
  <a ui-sref="route1.list.money($stateParams)">go to money</a><br />
  <a ui-sref="route1.list.detail($stateParams)">go to details</a>
  <div ui-view></div>
</div>

在这里查看所有操作。如果您想查看有关嵌套，视图命名等的更多信息，也可以查看此问答