UI路由器不把内容在指定的用户界面视图 [英] ui router does not put the content in the named ui-view

查看：137
本文介绍了UI路由器不把内容在指定的用户界面视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我输入路由

  \\＃\\项目\\ 100 \\日期\\ 2014年1月1日

在URL和preSS回报，我得到了项目状态。

我预计将引发projects.selected.dates状态。

为什么路由不工作？实际上它本地工作在我的机器上没有命名的视图...

http://plnkr.co/edit/0DJ6W7QEPx2UzpdzDrVu?p=$p$ PVIEW 

 使用严格的;
角
  .module（'设计助手'，['ui.router']）
  的.config（函数（$ stateProvider，$ urlRouterProvider）{    $ urlRouterProvider.otherwise（'/项目'）;
    $ stateProvider
      .STATE（'项目'，{        网址：'/项目'，
        观点：{
          菜单：{
            模板：开始你的项目！
          }，
          内容：{
            templateUrl：projects.html
            控制器：'ProjectsController
          }
        }
      }）
      .STATE（'projects.selected'，{
        网址：'/：专案编号
      }）
      .STATE（'projects.selected.dates'，{
        网址：'/日期/：日期，
        观点：{
          菜单：{
            templateUrl：menu.html
          }，
          内容：{
            templateUrl：dateplanner.html'，
            控制器：'DateplannerController
          }
        }
      }）
  }）;＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=设计助手＆GT;＆LT; HEAD＆GT;
  ＆LT;间的charset =UTF-8/＆GT;
  ＆LT;标题＆GT; AngularJS Plunker＆LT; /标题＆GT;
  ＆LT;脚本＆GT;
    文件撰写（'＆LT;基本href =+ document.location +'/＆GT;'）;
  ＆LT; / SCRIPT＆GT;
  ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
 ＆所述;脚本数据需要=angular.js@1.2.xSRC =的https：//$c$c.angularjs.org/1.2.20/angular.js数据semver =1.2.20＆GT ;＆LT; / SCRIPT＆GT;
  ＆所述;脚本数据需要=UI-路由器@ *数据semver =0.2.10SRC =htt​​ps://rawgit.com/angular-ui/ui-router/0.2.10/release/angular- UI-router.js＆GT;＆LT; / SCRIPT＆GT;  ＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
  ＆所述; SCRIPT SRC =ProjectsController.js＆GT;＆下; /脚本＆GT;
    ＆所述; SCRIPT SRC =DateplannerController.js＆GT;＆下; /脚本＆GT;＆LT; /头＆GT;＆LT;身体GT;
  ＆LT; D​​IV CLASS =包装＆GT;
    ＆LT;头类=搁置＆GT;标志及LT; /头＆GT;
    ＆LT;格UI视图=菜单中的ID =菜单级=搁置＆GT;＆LT; / DIV＆GT;
    ＆LT;格UI视图=内容类=主＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;


解决方案

有是更新和工作的 plunker ，这是必要的更新：

  .STATE（'projects.selected.dates'，{
    网址：'/日期/：日期，
    观点：{
      在@加{//此处：菜单@
        templateUrl：menu.html
      }，
      在@加{//此处是：内容@
        templateUrl：dateplanner.html'，
        控制器：'DateplannerController
      }
    }
  }）

看到'@'在用户界面视图名称末尾

完整的解释是在这里：


  

在幕后，每一个观点被分配遵循的方案绝对名称 视图名@ Statename的 ，其中视图名是所使用的名称view指令和国家名称是国家的绝对名称，例如： contact.item。您也可以选择在绝对语法来写你的视图名称。


所以，我所做的就是使用绝对名称 ..针对根源 - 的index.html

从文档的一些例子......极大地解释说，所有：

  $ stateProvider
  .STATE（'联系人'，{
    //这会得到自动插入不愿透露姓名的用户界面视图
    //父状态模板。由于这是一个顶级状态，
    //其父状态模板的index.html。
    templateUrl：contacts.html
  }）
  .STATE（'contacts.detail'，{
    观点：{
        ////////////////////////////////////
        //相对确定目标//
        //目标父状态的用户界面视图的//
        ////////////////////////////////////        //相对目标在这种状态下的父状态，接触的细节视图。
        //＆LT;格UI视图='细节'/＆GT; contacts.html内
        细节：{}，        //相对目标在这种状态下的父状态，'接触'无名视图。
        //＆LT;格UI画面/＆GT; contacts.html内
        ：{}，        ////////////////////////////////////////////////// /////
        //绝对定位使用@//
        //目标这个状态或其祖先中的任何视图//
        ////////////////////////////////////////////////// /////        //绝对目标在这种状态下，contacts.detail的信息视图。
        //＆LT;格UI视图='信息'/＆GT; contacts.detail.html内
        info@contacts.detail：{}        //绝对目标在'接触'状态'细节'视图。
        //＆LT;格UI视图='细节'/＆GT; contacts.html内
        细节@联系人：{}        //绝对目标在父母'接触'状态无名视图。
        //＆LT;格UI画面/＆GT; contacts.html内
        @contacts：{}

When I enter the route 

\#\projects\100\dates\2014-01-01

in the url and press return I get the "projects" state.

I expected to trigger "projects.selected.dates" state.

Why does the routing not work? Actually it works locally on my machine without named view...

http://plnkr.co/edit/0DJ6W7QEPx2UzpdzDrVu?p=preview

'use strict';
angular
  .module('projectplanner', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/projects');
    $stateProvider
      .state('projects', {

        url: '/projects',
        views: {
          'menu': {
            template: 'Start your projects!'
          },
          'content': {
            templateUrl: "projects.html",
            controller: 'ProjectsController'
          }
        }
      })
      .state('projects.selected', {
        url: '/:projectId'
      })
      .state('projects.selected.dates', {
        url: '/dates/:date',
        views: {
          'menu': {
            templateUrl: 'menu.html'
          },
          'content': {
            templateUrl: 'dateplanner.html',
            controller: 'DateplannerController'
          }
        }
      })
  });

<!DOCTYPE html>
<html ng-app="projectplanner">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title> 
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
 <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
  <script data-require="ui-router@*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>

  <script src="app.js"></script>
  <script src="ProjectsController.js"></script> 
    <script src="DateplannerController.js"></script> 

</head>

<body>
  <div class="wrapper" >
    <header class="aside">Logo</header>
    <div ui-view="menu" id="menu" class="aside"></div>
    <div ui-view="content" class="main">
    </div>
  </div>
</body>

</html>

解决方案

There is the updated and working plunker, and this is the essential update:

  .state('projects.selected.dates', {
    url: '/dates/:date',
    views: {
      'menu@': {                     // HERE is @ added
        templateUrl: 'menu.html'
      },
      'content@': {                  // HERE is @ added
        templateUrl: 'dateplanner.html',
        controller: 'DateplannerController'
      }
    }
  })

See the '@' at the end of the ui-view name

The full explanation is here:

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.

So, what I did is use of the absolute name .. targeting the root - index.html

Some examples from documentation... greatly explaining that all:

$stateProvider
  .state('contacts', {
    // This will get automatically plugged into the unnamed ui-view 
    // of the parent state template. Since this is a top level state, 
    // its parent state template is index.html.
    templateUrl: 'contacts.html'   
  })
  .state('contacts.detail', {
    views: {
        ////////////////////////////////////
        // Relative Targeting             //
        // Targets parent state ui-view's //
        ////////////////////////////////////

        // Relatively targets the 'detail' view in this state's parent state, 'contacts'.
        // <div ui-view='detail'/> within contacts.html
        "detail" : { },            

        // Relatively targets the unnamed view in this state's parent state, 'contacts'.
        // <div ui-view/> within contacts.html
        "" : { }, 

        ///////////////////////////////////////////////////////
        // Absolute Targeting using '@'                      //
        // Targets any view within this state or an ancestor //
        ///////////////////////////////////////////////////////

        // Absolutely targets the 'info' view in this state, 'contacts.detail'.
        // <div ui-view='info'/> within contacts.detail.html
        "info@contacts.detail" : { }

        // Absolutely targets the 'detail' view in the 'contacts' state.
        // <div ui-view='detail'/> within contacts.html
        "detail@contacts" : { }

        // Absolutely targets the unnamed view in parent 'contacts' state.
        // <div ui-view/> within contacts.html
        "@contacts" : { }

这篇关于UI路由器不把内容在指定的用户界面视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆