Issue in nested views

HI

I am trying to use nested views , but getting some javascript error like:

Uncaught TypeError: Cannot call method ‘insertBefore’ of null : ionic-bundle:10255

I am trying to make a OrderPage with 2 subpages:

ordermedicine.html:

  <ion-view name="selectstore">
 </ion-view>
 <ion-view name="patientdetails">
 </ion-view>

statemanagement:

.state('order', {
      url: '/order',
      abstract: true,
	  templateUrl: 'partials/ordermedicine.html',
	  controller: 'OrderMedicineCtrl'
    })
	.state('order.selectstore', {
      url: '/selectstore',
      views: {
        'selectstore': {
          templateUrl: "partials/order_selectstore.html",
          controller: 'OrderMedicineCtrl'
       }
      }
    })
	.state('order.patientdetails', {
      url: '/patientdetails',
       views: {
        'patientdetails': {
          templateUrl: "partials/order_patientdetails.html",
          controller: 'OrderMedicineCtrl'
        }
      }
    })

Controller:

    .controller('OrderMedicineCtrl', function($scope, $state) {
		$scope.patientdetails = function() {
		   console.log('patientdetails');
			$state.go('order.patientdetails');
		  };
		$scope.medicinedetails = function() {
		   console.log('medicinedetails');
			$state.go('order.medicinedetails');
		  }; 
		$scope.deliverydetails = function() {
		   console.log('deliverydetails');
			$state.go('order.deliverydetails');
		  }; 
		$scope.confirmorder = function() {
		   console.log('confirmorder');
			$state.go('order.confirmorder');
		  }; 		  
  })

order_selectstore.html

<ion-view title="Select Store">
	<ion-content>
		<a class="button icon-right ion-chevron-right button-calm" ng-click="patientdetails()">Enter Patient Details</a>
	</ion-content>
</ion-view>

order_pateintdetails.html

<ion-view title="Patient Details">
	<ion-content>
		<a class="button icon-right ion-chevron-right button-calm" ng-click="medicinedetails()">Enter Medicine Details</a>
	</ion-content>
</ion-view>

The same nested states concept however works for Tabbing. Am I missing anything basic here?

Making it a plunkr or codepen example would be helpful so I can interact with it, but for ordermedicine.html

I believe you should use <ion-nav-view> instead of <ion-view>. ionNavView is the directive to use when in a template to load the children partials into, and ionView is the wrapper around the children partials.

here is the link.

Idea is simple to have ordershome.html as parent and storedetails and patientdetails as child.

any suggestions on this ??

I’m no ui-router expert, but got it to work like this :

See this fixed sample : http://plnkr.co/edit/htE6yv?p=preview

The problem is that you were using ion-nav-view in “ordershome.html”. I changed those to :

  <ui-view name="selectstore">
	</ui-view>
  <ui-view name="patientdetails">
	</ui-view>

I’m not really sure if this is the best/correct way. You might want to experiment some more with it.

Thanks ,… but this is strange … :smile:

But I think with this navigation might not work as @gnomeontherun mentioned. However in reality it is working fine…

Anyways thanks again :smile: