Ionic 1.3.2 $ionicView.beforeEnter not firing


I have a controller with a list of items like so:

<ion-item ng-repeat="node in nodes track by" class="item-text-wrap">
	<span ng-if="node" ui-sref="node-detail({})">
		<span class="item-note label monospace">{{}}</span>
		<div class="node-display-id" ng-if="node.foreignId">{{node.getDisplayId()}}</div>

I have confirmed that the rendered HTML is correct:

I have trimmed the /nodes/:nodeId controller down to basically just this:

.config(function($stateProvider) {
	.state('node-detail', {
		url: '/nodes/:node',
		templateUrl: nodeDetailTemplate,
		controller: 'NodeCtrl'
.controller('NodeCtrl', function($cordovaGeolocation, $ionicLoading, $ionicPopup, $log, $q, $scope,
		$timeout, $window, AvailabilityService, Cache, Capabilities, debounce, Errors, EventService,
		NodeService, OutageService, ResourceService, storage, util) {
	$'NodeCtrl: initializing.');

	$scope.$on('$ionicView.loaded', function(ev, info) {
		$'node loaded');
	$scope.$on('$ionicView.beforeEnter', function(ev, info) {
		$'node before enter');

…and yet $ionicView.beforeEnter never fires when I click the item. It navigates to the new view, but that view never gets a “back” button:

The only thing I get in the logs is this:

181   744157   info     NodeCtrl: initializing.
182   744186   info     node loaded
183   744781   debug    NodesCtrl: after leave

…so it’s never logging “node before enter”. Any ideas what’s going wrong?


I’ve now added all of the following to my controller, and the only thing that fires is the “loaded” ones:

	$scope.$parent.$on('$ionicView.beforeEnter', function(ev, info) {
		$'$scope.$parent beforeEnter=' + info.stateName);
	$scope.$on('$ionicView.loaded', function(ev, info) {
		$'node loaded');
	$scope.$on('$ionicParentView.beforeEnter', function(ev, info) {
		$'parentview node before enter');
	$scope.$on('$ionicView.beforeEnter', function(ev, info) {
		$'node before enter');
	$scope.$on('$ionicParentView.enter', function(ev, info) {
		$'parentview node enter');
	$scope.$on('$ionicView.enter', function(ev, info) {
		$'node enter enter');

…something is clearly not happening in the router or state handling. I have tried his code with angular-ui-router versions 0.2.13, 0.2.18, and 0.4.2 with no changes in behavior.


Have the same issue with 1.3.2 and that only $ionicView.loaded gets triggered.

Apparently it has something to do with the templates, see here:

I couldn’t make it work with 1.3.2 and reverted back to 1.2.4.
I didn’t quite understand if the issue is caused by the <script id="some-template.html" type="text/ng-template"> part or something entirely else. We don’t use these types of template declaration, we use ngHtml2js. :disappointed:


i am also facing the same issue when I upgrade my version to 1.3.2… thinking about to downgrade again…


Holy crap! That was it, thanks! The problem was that the actual template had a <style></style> chunk at the same level of the <ion-item></ion-item>. Removing the CSS and putting it into my .scss file fixed it. I have a couple of other templates that had similar hacks that I just moved the CSS or wrapped the template in a <span></span>.


oh God, this really helps! how did you find that…:joy: