Multiple views by parents with angular ui-router

I have a view that is a child of two views. I want to have different urls to restore it. (for example: # / activities / contact / 12, # / search / contact / 12, etc.)

I haven't found a way to do this without duplicating the state definition.

  $stateProvider
  .state('main', {
    abstract: true,
    url: '/',
    controller: function() {

    },
    templateUrl: 'main.abstract.html'
  })
  .state('activities', {
    parent: 'main',
    url: 'activities',
    template: function() {
      return 'ACTIVITY TEMPLATE <br><br><a ui-sref="activities()">activity</a> <br/><a ui-sref="search()">search</a><br><br><a ui-sref="organization()">orga</a>';
    },
  })
  .state('search', {
    parent: 'main',
    url: 'search',
    template: function() {
      return 'SEARCH TEMPLATE <br><br><a ui-sref="activities()">activity</a> <br/><a ui-sref="search()">search</a><br><br><a ui-sref="organization()">orga</a>';

    },
  })
  .state('organization', {
      parent: 'main',
      url: '/contacts/:id',
      views: {
        "right@main": {
          template: function() {
            return 'orga loaded';
          }
        },
      }
  })

      

Plunkr is available here: http://plnkr.co/edit/hDZ1FQASKt8zctjNCOuF?p=preview

When the user clicks on the "orga" link, they should load the view in the red box, but keep the current parent view in the green one.

+3


source to share





All Articles