map render problem in different tabs #1395

Activity

1. rummelsworth commented on Jul 21, 2015

   

   rummelsworth

   on Jul 21, 2015

   Contributor

   More actions

   The behavior is caused by the maps in unselected tabs being rendered into hidden elements. The correct approach is to prevent map creation until the elements that will show it aren't hidden. You can use tab's active attribute along with ng-if to help with this...

   However, this is really strange because the FAQ's recommendation to use ng-if doesn't seem to help. See updated plunker here: http://plnkr.co/edit/pmCPVhGeIPQnUFqmCcJF?p=preview

   Not sure what the problem is. Hopefully I'm missing something obvious. @cthrax thoughts?
2. rummelsworth

   added

   needs investigation

   on Jul 21, 2015
3. cthrax commented on Jul 21, 2015

   

   cthrax

   on Jul 21, 2015

   Contributor

   More actions

   The ng-if condition is changing in the same digest loop as the display of the tabs, so the DOM still hasn't had a chance to render. If you disconnect those conditions, which honestly feels a little weird semantically, it will render properly. See this plnkr for an example http://plnkr.co/edit/KatCddVOfefPw9c09yPM?p=preview
4. rummelsworth commented on Jul 21, 2015

   

   rummelsworth

   on Jul 21, 2015

   Contributor

   More actions

   Nice 👍 I've learned another nuance of Angular's digestion...

   @uguryilmaz Follow up and reopen if this doesn't resolve the issue for you. Thanks.
5. rummelsworth

   closed this as completedon Jul 21, 2015
6. rummelsworth

   added

   question

   and removed

   needs investigation

   on Jul 21, 2015
7. uguryilmaz commented on Jul 21, 2015

   

   uguryilmaz

   on Jul 21, 2015

   Author

   More actions

   thanks so much @cthrax and @wrummler . that solves my problem.
8. nmccready commented on Jul 21, 2015

   

   nmccready

   on Jul 21, 2015

   Contributor

   More actions

   🎱
9. SunPj commented on Aug 13, 2016

   

   SunPj

   on Aug 13, 2016

   More actions

   Sometimes just setting ng-if to true doesn't solve the problem. I use following code to refresh map.

   $scope.showMap = false;
   $timeout(function() {
       $scope.showMap = true;
   });