angularjs ui router：嵌套视图和嵌套状态

Question

我是棱角分明的新手，我正在尝试理解嵌套视图的概念。 基于其文档中提供的示例： https ： //github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

//home.html
<body>
  <div ui-view="header"></div>
  <div ui-view="settings"></div>
  <div ui-view="content"></div>
</body>

我有settings.html有一个复选框。 如果已选中它将在视图（未命名）中加载高级设置模板，否则它将加载基本模板

//settings.html
<input type="checkbox" ng-change="change()"  ng-model="advancedSettings" />
<div ui-view></div>

到目前为止，我已经定义了这样的事情：

$stateProvider
  .state('home', {
    views: {
      'header': {},
      'settings': {
           templateUrl: 'settings.html'
       },
      'content': {},
    }
  })

因为我有2个模板basicSettings.html和advancedSettings.html我需要在settings.html的视图中加载基于该复选框，我想我必须声明这样的东西：

.state('settings@home.basic',(){
    templateUrl: 'basicSettings.html'
});

但它没有用，相反我在控制台上收到很多错误。 如何在不从主页视图（标题，设置，内容）中删除名称的情况下实现此目的的最佳方法，以及如何根据复选框更改视图？

谢谢

Answer 1

有一个工作的plunker

这里的解决方案可能是这样定义的状态：

  $stateProvider
    .state('home', {
      abstract: true,
      url: "/home",
      views: {
        'header': {
          template: "This is HEADER"
        },
        'settings': {
          templateUrl: 'settings.html',
          controller: 'HomeCtrl',
        },
        'content': {
          template: "This is CONTENT"
        },
      }
    })
    .state('home.basic', {
      url: "/basic",
      templateUrl: 'basicSettings.html'
    })
    .state('home.advanced', {
      url: "/advanced",
      templateUrl: 'advancedSettings.html'
    })

我们有父母国家“家”和两个孩子。 这些是由'HomeCtrl'在更改时触发'HomeCtrl' ，例如：

.controller('HomeCtrl', ['$scope', '$state',
    function($scope, $state) {

      $scope.advancedSettings = false;

      $scope.change = function(){
        var childState = $scope.advancedSettings
          ? "home.advanced"
          : "home.basic";
        $state.go(childState);
      } 
}])

因此，根据设置，视图目标“settings”及其ui-view="" （未命名的）将填充子状态 - 基本或高级

在这里查看

angularjs ui router：嵌套视图和嵌套状态

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-07-07 16:06:15

angularjs ui router：嵌套视图和嵌套状态

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-07-07 16:06:15

解决方案1
3 已采纳 2015-07-07 16:06:15