Stumped. ui-view Loads Two Views

1

Hi all. I have a template that has the line:

<div class="select-box-container" ui-view ng-cloak name="tune-step-partial"></div>

And then $stateProvider.states that provide views to this ui-view as the user navigates.

.state('tab.tune.setup', {
    url: '/setup',
    abstract: true,
    views: {
      'tab-tune@tab' : { 
        templateUrl : 'templates/rider/tune/tune.template.html',
        controller  : 'TuneCtrl'
      }
    }
  })
 .state('tab.tune.setup.make', {
    url: '/make',
    views: {
      "tune-step-partial" : { 
        templateUrl : "templates/rider/tune/partials/tune.setup.make.html",
        controller  : 'TuneCtrl'
      }
    }
  })

The problem I am having is two-fold. First, I am finding that the previous view remains viewable to the user for a moment as the new view loads. And second, as the user navigates deep in the sibling views, both views eventually remain in view until the user does something like clicks a radio button. Neither of these are issues during development and only appear in the iOS simulator or when loading a build onto a test device.

When it’s working correctly, I can see that a second div is added to the template then quickly removed. When it isn’t, the second div is added, but isn’t removed.

 <div class="select-box-container" ui-view ng-cloak name="tune-step-partial"></div>
 <div class="select-box-container" ui-view ng-cloak name="tune-step-partial"></div>

Has anyone else seen this and give me an idea about what to look at for a fix?

Many thanks

Evan

2

Turns out this was an angular digest problem (I think at least.) I was redirecting the user to a new ui-sref after a form submission and when I wrapped $state.go in a $timeout, the issue was fixed.

//Old, worked in Chrome, not iOS
$state.go('tab.nextSref');

//New, working in iOS
$timeout(function(){
    $state.go('tab.nextSref');
}, 0);

How does one debug digest issues? This was a serious PITA and production drain for about a week now.