Ionic 1.3.2 $ionicView.beforeEnter not firing

ionic-v1
1

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

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

I have confirmed that the rendered HTML is correct:

image
NodesListHTML.png1334Ă—290 112 KB

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

.config(function($stateProvider) {
	$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) {
	$log.info('NodeCtrl: initializing.');

	$scope.$on('$ionicView.loaded', function(ev, info) {
		$log.info('node loaded');
	});
	$scope.$on('$ionicView.beforeEnter', function(ev, info) {
		$log.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:

image
Simulator Screen Shot Feb 1, 2017, 10.42.55 AM.png640Ă—1136 23.5 KB

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?

2

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) {
		$log.info('$scope.$parent beforeEnter=' + info.stateName);
	});
	$scope.$on('$ionicView.loaded', function(ev, info) {
		$log.info('node loaded');
	});
	$scope.$on('$ionicParentView.beforeEnter', function(ev, info) {
		$log.info('parentview node before enter');
	});
	$scope.$on('$ionicView.beforeEnter', function(ev, info) {
		$log.info('node before enter');
	});
	$scope.$on('$ionicParentView.enter', function(ev, info) {
		$log.info('parentview node enter');
	});
	$scope.$on('$ionicView.enter', function(ev, info) {
		$log.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.

3

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: https://github.com/driftyco/ionic/issues/6577

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:

1 Like
4

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

5

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>.

6

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