标签：angularjs angular-ui-router javascript jquery

我正在创建一个网络应用程序,以帮助学生学习科学,历史和数学.当您第一次登陆该网站时,我会有一个主页/登陆页面.当您单击“入门”时,我将转到/ exam / instructions.我的每个步骤均会说明,数学和科学处理我们加载到ui-view =“ exam-detail”中的模板.目前,当我通过科学导航和从指令中导航时,整个ui视图都会加载.理想情况下,我只想要一个分页区域和一个主题区域,并且只希望ui-view =“ exam-detail”用正确的模板进行更新.

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

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('/');
  }

})();

解决方法:

有a working plunker

有类似的问与答实际上,使用工作的插件：

Angular UI Router – Nested States with multiple layouts

解决方案是将静态视图从子视图移动到父视图.不会为每个孩子都重新加载它(仅在更改父状态时才重新加载视图).我们将使用绝对命名(有关更多详细信息,请参见随附的链接)

这就是代码调整

.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'
      }
    }
  });

还要检查此内容以获取有关绝对视图命名的更多详细信息

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

working example is here

标签：angularjs,angular-ui-router,javascript,jquery
来源： https://codeday.me/bug/20191119/2038639.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。