Issue in nested views

ionic-v1
1

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?

2

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.

3

here is the link.

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

4

any suggestions on this ??

5

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.

6

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: