map render problem in different tabs

[uguryilmaz]

i have a tab control in my form. every tab page has its map object. first tab loads succesfully but maps in other tabs not loaded successfuly. here is plunker:

http://plnkr.co/edit/JUHRt5ogLcq0Eq6uo8n1?p=preview

[rummelsworth]

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?

[cthrax]

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

[rummelsworth]

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.

[uguryilmaz]

thanks so much @cthrax and @wrummler . that solves my problem.

[nmccready]

🎱

[SunPj]

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;
});