Question

我在plunker上发布了一个样本：

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

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

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

原因可能是因为日期，星期和月份控制器没有在代码中被命中为什么。

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

由于我不知道我必须要求两个案件的真正原因。

'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是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

快速概述

放置在ui-view="content"中的index.html获取绝对名称“content @”。分隔符为 @ ，状态为root，表示为“”（字符串为空）。即 viewname @ statename ===`“content @”
儿童可以定位父母的日期，例如“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'
              }
            }
          })
      });

html partial未加载到ui-view中

2 个答案: