Using components as templates in ui router conflicts with nav bar

ionic-v1
1 
Hello Everyone

I just noticed a problem with ion-nav-bar which appears when using directives as templates with ui router. Being precise, when using state router as - 

      .state('tab.home', {
        url: '/home',
        views: {
          'tab-home': {
            template: '<home></home>'
          }
        }
      })

Where is a reusable compnent/directive with it’s own ion-view and ion-components.

angular.module('myapp.Directives').directive("home",[function () {
    return {
        restrict: "E",
        replace: true,
        templateUrl: 'views/home.html',
        scope: {
        },
        bindToController: {  
        },
        controllerAs: "shiftCtrl",
        controller: function ($scope) {
            //controller code here
        }
    }
}])

Everything seems to be working fine until I use or in the definition of ‘home.html’ because these don’t work at all. However, when I define state like -

  .state('tab.home', {
    url: '/home',
    views: {
      'tab-home': {
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl'
      }
    }
  })

The nav buttons and nav title work fine in this case.
I have tried a couple of tweaks but none of them seems to work. Can someone please help me fixing this issue?

Thanks

2

Hi @anmolarora

Did you find any solution to this issue? Experiencing the same right now…

3

2 hours later, after digging deep down into ionic code…
The navbar & navbuttons are not initialized because the ionView is initialized too late after the viewSwitcher decided to start rendering it and triggered events “beforeEnter” (which handlers are responsible for drawing navBar & navButtons).

viewSwitcher.js
find

if (enteringScope) {
  enteringScope.$emit('$ionicView.' + step + 'Enter', enteringData);
  enteringScope.$broadcast('$ionicParentView.' + step + 'Enter', enteringData);
}

and change it to:

if (enteringScope) {
  enteringScope.$emit('$ionicView.' + step + 'Enter', enteringData);
  enteringScope.$broadcast('$ionicParentView.' + step + 'Enter', enteringData);
  // custom: make sure the viewController received the event
  enteringScope.$on('$ionicView.listeningReady', function() {
    enteringScope.$emit('$ionicView.' + step + 'Enter', enteringData);
  });
}

viewController.js
at the end of self.init, add:

$scope.$broadcast('$ionicView.listeningReady');

These changes are not production-ready yet. Please let me know if you encounter any issue.
I’ll probably create a proper patch/commit on my own fork, as I plan to implement (or try to…) the COMPONENT ROUTING with a newer version of ui-router than the very old one integrated into ionic v1…