html 部分未加载到 ui-view

Question

我在 plunker 上发布了一个示例：

http://plnkr.co/edit/aOOlXOUIUQTARb8D7jNR?p=preview

我的浏览器控制台没有错误。

我希望当我通过按下按钮下方的相应按钮来切换日/周/月视图时，会显示视图的 html。但事实并非如此。

原因可能是代码中没有命中 day 、 week 和 month 控制器。

所以我的问题是为什么没有加载控制器或没有用真正的 html 部分替换 ui-view。

由于我不知道真正的原因，我不得不询问这两种情况。

'use strict';
angular
  .module('dates', ['ui.router'])
  .run(['$rootScope', '$state', '$stateParams',
      function($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
      }
    ]
  )
  .config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dateplanner/day');

    $stateProvider
      .state('dates', {
        url: '/dateplanner',
        abstract: true,
        views: {
          'menu@': {
            templateUrl: 'menu.html'
          },
          'content@': {
            templateUrl: 'dateplanner.html',
            controller: 'DateplannerController'
          }
        }
      })
       .state('dates.day', {
        url: '/day',
        views: {
          'planner@': {
            templateUrl: 'dateplannerday.html',
            controller: 'DateplannerDayController'
          }
        }
      })
        .state('dates.week', {
        url: '/week',
        views: {
          'planner@': {
            templateUrl: 'dateplanner.week.html',
            controller: 'DateplannerWeekController'
          }
        }
      })
        .state('dates.month', {
        url: '/month',
        views: {
          'planner@': {
            templateUrl: 'dateplanner.month.html',
            controller: 'DateplannerMonthController'
          }
        }
      })
  });

MENU.HTML

<ul>
  <li ng-class="{ activeButton: $state.includes('dates') }" ui-sref-active="active">
    <a ui-sref="dates.day">date planner</a> 
  </li>
</ul>

DATEPLANNER.HTML

<div class="btn-group">
  <button ui-sref="dates.day" ui-sref-active="btn-primary" type="button" class="btn btn-default">Day</button>

  <button ui-sref="dates.week" ui-sref-active="btn-primary" type="button" class="btn btn-default">Week</button>

  <button ui-sref="dates.month" ui-sref-active="btn-primary" type="button" class="btn btn-default">Month</button>
</div>
<div style="background:white;" ui-view="planner">
Loading...</div>

Answer 1

正如我们在这里讨论的那样：

• Replace self partial with another partial with angularjs ui router

问题与以下有关：

• View Names - Relative vs. Absolute Names

在我们的例子中，我们可以通过扩展子状态（日、周、月）来修复这个example。他们的视图名称以绝对视图名称目标为目标：

   .state('dates.day', {
    url: '/day',
    views: {
      'planner@dates': {
         ...
      }
    }
  })
    .state('dates.week', {
    url: '/week',
    views: {
      'planner@dates': {
         ...
      }
    }
  })
    .state('dates.month', {
    url: '/month',
    views: {
      'planner@dates': {
         ...
      }
    }

因为这些视图目标的状态为dates，所以我们在分隔符@ 之后添加其名称，即“planner@dates”。另外，因为这个状态是所有它们的父状态，我们可以跳过它。父状态是 ui-router 为我们注入的幕后状态。更多解释：

在幕后，每个视图都被分配了一个遵循 viewname@statename 方案的绝对名称，其中 viewname 是视图指令中使用的名称，状态名称是状态的绝对名称，例如联系方式。项目。您还可以选择以绝对语法编写视图名称。

快速概览

1. 放在index.html 中的ui-view="content" 将获得绝对名称“content@”。分隔符是 @ 并且状态是根表示为“”（字符串为空）。 IE。 viewname@statename ===`"content@"

2. 孩子可以定位父母的日期，例如“planner@dates”或“planner”。他们还可以像“content@”一样定位根

Answer 2

请看这里http://plnkr.co/edit/8a898K4F0zz1z9VcH9Tq?p=preview 在视图名称中使用 @ 的原因是什么？

 angular
      .module('dates', ['ui.router'])
      .run(['$rootScope', '$state', '$stateParams',
          function($rootScope, $state, $stateParams) {
            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;
          }
        ]
      )
      .config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/dateplanner/day');

        $stateProvider
          .state('dates', {
            url: '/dateplanner',
            abstract: true,
            views: {
              'menu': {
                templateUrl: 'menu.html'
              },
              'content': {
                templateUrl: 'dateplanner.html',
                controller: 'DateplannerController'
              }
            }
          })
           .state('dates.day', {
            url: '/day',
            views: {
              'planner': {
                templateUrl: 'dateplannerday.html',
                controller: 'DateplannerDayController'
              }
            }
          })
            .state('dates.week', {
            url: '/week',
            views: {
              'planner': {
                templateUrl: 'dateplanner.week.html',
                controller: 'DateplannerWeekController'
              }
            }
          })
            .state('dates.month', {
            url: '/month',
            views: {
              'planner': {
                templateUrl: 'dateplanner.month.html',
                controller: 'DateplannerMonthController'
              }
            }
          })
      });