html部分未加载到ui-view中 [英] html partial is not loaded into ui-view

问题描述

我已经将一个样本发布到了plunker:

I have posted a sample on plunker:

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

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

I get no errors in my browser console.

我希望当我通过按按钮下方显示按钮的相应按钮来显示日/周/月视图时，显示视图的html.但这不会发生.

I want that when I switch the day/week/month views by pressing the according button that below the buttons the html for the view is shown. But that happens not.

原因可能是因为无论如何都没有在代码中击中day，week和month控制器.

The reason might because the day , week and month controllers are not hit in the code whyever that is.

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

So my question is why are the controllers not loaded or the ui-view not replaced with the real html partial.

由于我不知道真正的原因，因此我必须同时询问这两种情况.

As I do not know the real cause I have to ask for both cases.

'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>

推荐答案

正如我们在此处讨论的那样:

As we've discussed it here:

• 使用angularjs ui路由器将自身部分替换为另一部分

该问题与以下内容有关:

the issue is related to the:

• 在我们的情况下，我们可以通过扩展子状态(天，周，月)分别.他们的视图名称以绝对视图名称为目标:

  In our case, we can fix this example by extending the child states (day, week, month) resp. their view names to be targeting the absolute view names target:

     .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为我们注入的幕后.一些更多的解释:

  Because these views target is in the state dates we are adding its name after delimiter @, i.e. 'planner@dates'. Also, because this state is parent of all of them, we can skip it. Parent state is behind the scene injected for us by ui-router. Some more explanation:

  在幕后，每个视图都被分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，州名称是州的绝对名称，例如contact.item.您还可以选择以绝对语法编写视图名称.

  Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

  快速概述

  1. 放置在index.html中的ui-view="content"正在获得绝对名称"content @".分隔符为 @ ，状态的根表示为". (字符串为空). IE. viewname @ statename ===`" content @"

  1. The ui-view="content" placed in index.html is getting the absolute name "content@". The delimiter is @ and state is root represented as "" (string empty). I.e. viewname@statename ===`"content@"

  孩子可以针对父母的日期，例如"planner @ dates"或计划者".他们还可以定位像"content @"之类的根

  The dates children can target parent like "planner@dates" or "planner". They also can target root like "content@"

  这篇关于html部分未加载到ui-view中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！