Solved - TypeError: Cannot call method 'insertBefore' of null


Hi, I’ve a SideMenu with a ng-repeat populated by $http. So when I click on item , I call a view and controller, but not display the view in sidemenu because I’ve always “TypeError: Cannot call method ‘insertBefore’ of null”


Index Menu:

Child View ( into html external file )

   <ion-item ng-repeat="item in itemList" type="item-text-wrap" href="">

.controller(‘PfItemsCtrl’, function($scope, $stateParams, $http, exchAPIservice) {
// “Pets” is a service returning mock data (services.js)
$scope.headerTitle = “Elenco PF 2”;
$scope.itemList = [];

$scope.itemList=$http({method: ‘GET’, url: ‘js/subdir_FlightSims.json’, cache:false});


.state(‘’, {
url: ‘/pfitems/:pfId’,
views: {
‘menu-view’: {
templateUrl: ‘templates/pf-items.html’,
controller: ‘PfItemsCtrl’


I’m having trouble wrapping my head around that. Can you put up a CodePen sample?

However, I’m not sure you can use :

$scope.itemList=$http({method: 'GET', url: 'js/subdir_FlightSims.json', cache:false});

Angular’s $http is essentially a promise and provides success and error callbacks. You need to assign the values in the success callback.

$http({method: 'GET', url: 'js/subdir_FlightSims.json', cache:false})
.success( function(data, status, header, config) {
    $scope.itemList = data;


No. I’ve the same error. My code before was:

exchAPIservice.GetChildPublicFolders($stateParams.pfId).success(function (response) {
$scope.itemList = response;
error(function(response,status, headers, config) {

but with the same error.


I published to for helping.
PS: I need to polish the code. This is for testing.


I really can’t go through your whole code base. If you setup a CodePen sample then I can dabble with it to see what is going wrong.


Ok…How config CodePen ( my solution has more files )? I debugged with Chrome and the error in ionic.bundle.js at 10181 ( see image )


I found the problem.
I try to remove parameter from url into state url '/pf/:pfId'
and the error gone.
Now is:

.state('', {
	url: '/pf',
	views: {
		'content-view': {
			templateUrl: 'templates/pf.html',
			controller: 'PfListCtrl'

I used before this sintax to call the view with parameter into template

 <a  ui-sref="{ pfId: item.UniqueId })"><i class="icon ion-android-storage"></i></a> {{item.Name}} 

I try to leave the state unchanged and call the view without parameter and it works. I see the next view into side menu area or content area.

So… Which is the method to pass parameter, to config url and call the template?


The problem is the parameter value.
It works with

<a ui-sref="{ publicNo: item.Name})" href="#/tab/pf/**FlightSims**"><i class="icon ion-android-storage"></i></a>

Don’t works with

<a ui-sref="{ publicNo: item.UniqueId})" href="#/tab/pf/**AQEuAAADGkRzkKpmEc2byACqAC%2FEWgMA2sW1g79X1Ea9vI48%2Bu2PDAAAAw4AAAA%3D**"><i class="icon ion-android-storage"></i></a>

But I need to use the second value!


Are you sure item.UniqueId exists? Without using the ui-sref, just print out that variable onto the page to make sure it displays


CodePen : Just setup a simple sample. You can fork something like this.


Yes, it’s exist. I try to encode date before.


I solved. I pass the parameter after encode it.


  <a ui-sref="{ publicNo: parseUniqueID(item.UniqueId), pfName:item.Name })"><i class="icon ion-android-storage"></i></a> 

into the caller controller

$scope.parseUniqueID = function(pfID) {
        //date parsing functionality
        return Base64.encode(pfID);

so into the target controller, I read the parameter with

$scope.mytitle = $stateParams.pfName;

… the error is gone!


I facing similar problem…

I have sref tag inside directive-

<article class="list-item" ui-sref='tab.singleVenue({id: })'>

The id parameter is int.

Error: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
at Error (native)
at http://app.godisco/src/vendor/angular/angular.js:2937:16
at forEach (http://app.godisco/src/vendor/angular/angular.js:328:18)
at forEach.replaceWith (http://app.godisco/src/vendor/angular/angular.js:2933:5)
at Object.JQLite.(anonymous function) [as replaceWith] (http://app.godisco/src/vendor/angular/angular.js:3061:17)
at IonicModule.controller._animateTitles (http://app.godisco/src/vendor/ionic/release/js/ionic-angular.js:3836:32)
at IonicModule.controller.changeTitle (http://app.godisco/src/vendor/ionic/release/js/ionic-angular.js:3811:12)
at link (http://app.godisco/src/vendor/ionic/release/js/ionic-angular.js:7751:22)
at nodeLinkFn (http://app.godisco/src/vendor/angular/angular.js:6648:13)
at compositeLinkFn (http://app.godisco/src/vendor/angular/angular.js:6039:13) <ion-view class="ng-enter pane"> 
  • I also tried to replace the sref with function in the controller which do $state.go()


this is really odd… sometime it just work randomly.

I doesn’t realize it yet… but I think after a few times it does work. maybe after the ajax on the “new” page is loaded… it seams like it related to the title. I tried to add temporary title until the ajax is loaded but it didn’t helped.

I have a guess that this issue is happening after “too fast” clicking on the element after it load. if I wait a second or two after the element is load then clicked it work. weirddd…


Have ID some special chars?


Nope, I haven’t. (this is the part I just write some shitty text until 20chars)


Uhm…I think that the problem is the url. Which are your states?


It suddenly start working again… I think its related to fixing other bugs that we solve on the “forward state”