如何使用 UI-Router 仅更新命名视图 [英] How to update only the named view using UI-Router

问题描述

我正在创建一个网络应用来帮助学习科学、历史和数学的学生.当您第一次登陆该网站时，我有一个主页/登陆页面.当您单击开始时，我会转到/exam/instructions.我的每个步骤说明、数学和科学都是我加载到 ui-view="exam-detail" 中的模板.目前，当我通过科学导航和导航指令时，整个 ui-view 会加载.理想情况下，我只需要一个用于分页的区域和一个用于主题的区域，并且只希望 ui-view="exam-detail" 使用正确的模板进行更新.

我根本没有使用过 UI-Router，任何帮助将不胜感激.

index.html

state-exam>exam.html

<nav ui-view="exam-pagination"></nav><section ui-view="exam-detail"></section>

route.js

(function() {'使用严格';有角的.module('studentPortal').config(routeConfig);功能路由配置($stateProvider，$urlRouterProvider){$stateProvider.state('家', {网址:'/'，templateUrl: 'app/main/main.html',控制器:'主控制器'，控制器为:'主要'}).state('考试', {网址:'/考试/:步骤'，摘要:真实，templateUrl: 'app/state-exam/exam.html',控制器:'考试控制器'，controllerAs: 'examController',}).state('考试说明', {网址:'/说明'，意见:{'考试分页':{templateUrl: 'app/state-exam/exam-pagination.html'},考试详情":{templateUrl: 'app/state-exam/exam-instructions.html'}}}).state('考试数学', {网址:'/数学'，意见:{'考试分页':{templateUrl: 'app/state-exam/exam-pagination.html'},考试详情":{templateUrl: 'app/state-exam/exam-math.html'}}});$urlRouterProvider.otherwise('/');}})();

解决方案

有 一个工作 plunker

有一个类似的问答事实上，与工作plunker:

Angular UI 路由器 - 具有多种布局的嵌套状态

这里的解决方案是将 static 视图从子视图移动到父视图.它不会为每个孩子重新加载(只有当父状态改变时才会重新加载视图).我们将使用绝对命名(查看包含的链接了解更多详情)

所以这是代码调整

.state('考试', {网址:'/考试/:步骤'，摘要:真实，//根视图和静态分页视图//将在这里定义，所以我们需要视图:{}意见:{'':{templateUrl: 'app/state-exam/exam.html',控制器:'考试控制器'，controllerAs: 'examController',},//绝对命名针对上面定义的视图'考试分页@考试':{templateUrl: 'app/state-exam/exam-pagination.html'},}}).state('考试说明', {网址:'/说明'，意见:{//'exam-pagination':{},//在父级中定义考试详情":{templateUrl: 'app/state-exam/exam-instructions.html'}}}).state('考试数学', {网址:'/数学'，意见:{//'exam-pagination':{},//在父级中定义考试详情":{templateUrl: 'app/state-exam/exam-math.html'}}});

另请检查此以获取有关绝对视图命名的更多详细信息

• Angular UI 路由器嵌套视图
• Angular-UI 路由器:嵌套视图不起作用

工作示例在这里

I am creating a web app to help students in science, history and math. When you first land on the site I have a home/landing page. When you click get started I route to /exam/instructions. Each of my steps instructions, math and science our templates that I load into the ui-view="exam-detail". Currently the whole ui-view loads when I navigate to and from instructions through sciences. Ideally I simply want an area for pagination and an area for the subject matter and only want the ui-view="exam-detail" to update with the correct template.

I have not used UI-Router at all and any assistance would be greatly appreciated.

index.html

<div ui-view></div>

state-exam>exam.html

<div class="state-exam">
    <nav ui-view="exam-pagination"></nav>
    <section ui-view="exam-detail"></section>
</div>

route.js

(function() {
'use strict';

angular
.module('studentPortal')
.config(routeConfig);

function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
  })

  .state('exam', {
    url: '/exam/:step',
    abstract: true,
    templateUrl: 'app/state-exam/exam.html',
    controller: 'ExamController',
    controllerAs: 'examController',
  })

  .state('exam.instructions', {
    url: '/instructions',
    views: {
      'exam-pagination':{
        templateUrl: 'app/state-exam/exam-pagination.html'
      },
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-instructions.html'
      }
    }
  })

  .state('exam.math', {
    url: '/math',
    views: {
      'exam-pagination':{
        templateUrl: 'app/state-exam/exam-pagination.html'
      },
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-math.html'
      }
    }
  });
  $urlRouterProvider.otherwise('/');
  }

})();

解决方案

There is a working plunker

There is a similar Q & A in fact, with working plunker:

Angular UI Router - Nested States with multiple layouts

Solution here, is to move the static view from child to parent. It won't be reloaded for each child (view is reloaded only if parent state is changed). We will use absolute naming (see included links for more details)

So this is the code adjustment

.state('exam', {
    url: '/exam/:step',
    abstract: true,
    // the root view and the static pagination view
    // will be defined here, so we need views : {}
    views: {
      '':{
        templateUrl: 'app/state-exam/exam.html',
        controller: 'ExamController',
        controllerAs: 'examController',
      },
      // absolute naming targets the view defined above
      'exam-pagination@exam':{
        templateUrl: 'app/state-exam/exam-pagination.html'
      },
    }
  })

  .state('exam.instructions', {
    url: '/instructions',
    views: {
      // 'exam-pagination':{}, // defined in parent
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-instructions.html'
      }
    }
  })

  .state('exam.math', {
    url: '/math',
    views: {
      // 'exam-pagination':{}, // defined in parent
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-math.html'
      }
    }
  });

Also check this to get more details about absolute view naming

• Angular UI router nested views
• Angular-UI Router: Nested Views Not Working

The working example is here

这篇关于如何使用 UI-Router 仅更新命名视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！