CODEWITHSUNDEEP
angularjsangular-ui-router
MatMath
MatMath

Reputation: 37

Angular UI Router, Sub views get unset after a change of state

I debated a while on this but I got a Plunk that reproduce it.

I have a state "Contact" that get loaded by default. with $state.transitionTo Inside that state I have some views, they all get loaded and everything work.

If I click to change the state to "Home" by default or by "ui-sref" and in the "Home" state/template I have ui-sref="contacts". When we click back to set the state to contacts it should work, but all the sub views are now not being called properly.

It seems that when ui-sref call the state this one behave differently that when it is loaded by default.

Why $state.transitionTo(''); seems to work differently than ui-sref.

<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

  // For any unmatched url, send to /
  $urlRouterProvider.otherwise("/")

  $stateProvider
  .state('home', {
    templateUrl: 'home.html',
    controller: function($scope){
    }
  })
  .state('contacts', {
    templateUrl: 'contacts.html',
    controller: function($scope){
    }
  })
  .state('contacts.list', {
    views:{
      "":{
        template: '<h1>Contact.List Working wi no Data defined.</h1>'
      },
      "stateSubView":{
        template: '<h2>StateSubView Working</h2>'
      },
      "absolute@":{
        template: '<h2>Absolute item</h2>'
      }
    }
  });
});
myapp.controller('MainCtrl', function ($state) {
  $state.transitionTo('contacts.list');
})

Q2: Why is the Absolute tag that is under contact work when I add the view in the Index, but is not working when it is inside the contact.html file. Absolute reference work only with the Index and not if called everywhere?

"absolute@":{
            template: '<h2>Absolute item</h2>'
          }

Upvotes: 0

Views: 73

Answers (2)

MatMath
MatMath

Reputation: 37

The empty ui-view work as a wild card and can be use to switch across multiple route even if we have nested element. But if we have a nested view contact.list it can only be access if we put the whole path in ui-sref="contacts.list" because the list child of contact cannot be access only by using ui-sref="contacts"

Upvotes: 0

FlorianTopf
FlorianTopf

Reputation: 948

I saw that in index.html you have an empty ui-view tag. What do you expect to go there? I think you can not do this. The router just doesn't know with which state (home or contacts) it should replace. Apparently it picks the second one (contacts). I'd suggest to put url: '/' in the home state and you'll see the difference.

This is for sure one issue.

Other than that: You can't simply access views from contacts.list in contacts afaik.

Upvotes: 0

Related Questions