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': {},
    }
  })

因为我有两个模板basicSettings.html和advancedSettings.html，我需要根据该复选框从settings.html加载视图，我想我必须声明这样的内容：

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

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

由于

Answer 1

有a working 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' 更改时触发的，例如像这样：

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

      $scope.advancedSettings = false;

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

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

检查here

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

1 个答案: