CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
tom
tom

Reputation: 2299

parallel states in ui-router and angularjs - preventing reload

I have a 'parallel states' setup in ui-router that allows the url and state to determine two different parts of the DOM (left and right). The right is always 'bar', the left varies between baz and bat. There is an abstract parent state which determines which project to show via a project_id. Changing the parent state / project_id changes the content for baz, bat and bar. The code is below, and works.

The problem is that when the state transitions from project.baz -> project.bat, the 'bar' view re-initializes (e.g. directives rerun linking functions), which causes some ui ugliness.

Question: is there a way to prevent the 'bar' view from being reinitialized when the state changes from project.baz -> project.bat? Of course it should reinitialize when it's parent state (i.e. the project_id) changes.

thanks

$stateProvider
.state('project', {
        abstract: true,
        url: "/qux/:project_id",
        views: {
           "left": {
              templateUrl: 'foo.html',
              controller: 'FooController'
           },
           "right": {
              templateUrl: 'bar.html',
              controller: 'BarController'
           }
        }
     })

     .state('project.baz', {
        url: "/baz",
        views: {
           "": {
              templateUrl: 'baz.html',
              controller: 'BazController'
           },
           "right": {
              templateUrl: 'bar.html',
              controller: 'BarController',

           }
        }
     })

     .state('project.bat', {
        url: '/bat',
        views: {
           "": {
              templateUrl: 'bat.html',
              controller: 'BatController'
           },
           "right": {
              templateUrl: 'bar.html',
              controller: 'BarController'
           }
        }
     })

Upvotes: 1

Views: 572

Answers (1)

potatosalad
potatosalad

Reputation: 4887

I am unable to reproduce the problem you described: http://plnkr.co/edit/krpCu6HokH365ukisPHu?p=preview

It may be unnecessary to have the "right" view specified on the child views if it is no different than the one on the parent state's views:

$stateProvider
  .state('project', {
    abstract: true,
    url: "/qux/:project_id",
    views: {
      "left": {
        templateUrl: 'foo.html',
        controller: 'FooController'
      },
      "right": {
        templateUrl: 'bar.html',
        controller: 'BarController'
      }
    }
  })
  .state('project.baz', {
    url: "/baz",
    templateUrl: 'baz.html',
    controller: 'BazController'
  })
  .state('project.bat', {
    url: '/bat',
    templateUrl: 'bat.html',
    controller: 'BatController'
  });

However, even with the code copied verbatim from your question, I was unable to reproduce the problem.

Upvotes: 1

Related Questions