leaflet.js的invalidateSize()方法在angularJS里不生效？

我用jquery和angualrJS分别做了个demo，地图刚开始的时候是隐藏的，点击一个图片后，该图片消失，地图显示，地图由于在显示的过程中，大小变化了，所以使用map.invalidateSize()方法，让地图很快显示出来；用jQuery写，一点问题都没有，然而，用angularJS写，这个方法却不生效，请大神们指教~

<body ng-app="app" ng-controller="ctrl">
    <div id="box">
        <div class="map-box" ng-show="!show" ng-class="{'show': !show}">
            <div id="map"></div>
            <span>×</span>
        </div>
        <img src="fake_map.png" ng-click="fn()" ng-show="show">
    </div>
</body>
<script type="text/javascript">
var map = L.map('map').setView([22.54046422124227, 113.93264221191406], 12);
L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWJieW1ycyIsImEiOiJjaW9jb3J0ZWEwNGJwdmlsend4M2VoeWp5In0._xG7qbB8euaHzRxbY2DrFw', {
    maxZoom: 18
}).addTo(map);
var marker = L.marker([22.54046422124227, 113.93264221191406]).addTo(map);

var app = angular.module('app',[]);
app.controller('ctrl', function ($scope) {
    $scope.show = true;
    $scope.fn = function(){
        $scope.show=!$scope.show;
        map.invalidateSize();
        console.log('test');
    }
})
</script>

已修复~
$scope.fn = function() {

$scope.show = !$scope.show;
var box = document.querySelector('.map-box');
angular.element(box).on('animationend', function(){
    map.invalidateSize();
});

};

【热门文章】