How to update only the named view using UI-Router

问题

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

})();

回答1:

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

来源：https://stackoverflow.com/questions/32448285/how-to-update-only-the-named-view-using-ui-router

标签

javascript

jquery

angularjs

angular-ui-router