html 部分未加载到 ui

本文介绍了html 部分未加载到 ui-view的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

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

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

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

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

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

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

因为我不知道真正的原因，所以我不得不问这两种情况.

'use strict';有角的.module('日期', ['ui.router']).run(['$rootScope', '$state', '$stateParams',函数($rootScope，$state，$stateParams){$rootScope.$state = $state;$rootScope.$stateParams = $stateParams;}]).config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/dateplanner/day');$stateProvider.state('日期', {url: '/dateplanner',摘要:真实，意见:{'菜单@': {templateUrl: 'menu.html'},'内容@': {templateUrl: 'dateplanner.html',控制器:'DateplannerController'}}}).state('dates.day', {网址:'/天'，意见:{'计划者@':{templateUrl: 'dateplannerday.html',控制器:'DateplannerDayController'}}}).state('dates.week', {网址:'/周'，意见:{'计划者@':{templateUrl: 'dateplanner.week.html',控制器:'DateplannerWeekController'}}}).state('dates.month', {网址:'/月'，意见:{'计划者@':{templateUrl: 'dateplanner.month.html',控制器:'DateplannerMonthController'}}})});

MENU.HTML

<li ng-class="{ activeButton: $state.includes('dates') }" ui-sref-active="active"><a ui-sref="dates.day">日期计划器</a>

DATEPLANNER.HTML

<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">周</button><button ui-sref="dates.month" ui-sref-active="btn-primary" type="button" class="btn btn-default">月</button>
<div style="background:white;"ui-view="计划员">正在加载...</div>

解决方案

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

使用 angularjs ui 路由器将 self 部分替换为另一个部分

该问题与以下内容有关:

查看名称 - 相对名称与绝对名称

在我们的例子中，我们可以通过扩展子状态(日、周、月).他们的视图名称以绝对视图名称为目标:

 .state('dates.day', {网址:'/天'，意见:{'计划者@日期':{...}}}).state('dates.week', {网址:'/周'，意见:{'计划者@日期':{...}}}).state('dates.month', {网址:'/月'，意见:{'计划者@日期':{...}}

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

<块引用>

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

快速概览

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

孩子可以像planner@dates"一样定位父母的日期或计划者".他们也可以像content@"这样的根目录

I have posted a sample on plunker:

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

I get no errors in my browser console.

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.

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

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:

Replace self partial with another partial with angularjs ui router

the issue is related to the:

View Names - Relative vs. Absolute Names

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

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:

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.

Quick overview

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@"

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

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