我使用的UI路由器 ,并试图实例化一个小部件,作为一个参数由id指定DOM元素。 此DOM元素是在一个<div ng-switch>
和我想打电话当元件被保证存在微件的构造。
<div ng-switch on="state">
<div ng-switch-when="map">
<div id="map"></div>
</div>
</div>
从UI的路由器生命周期 ,我知道我应该挂接到$viewContentLoaded
。 然而,这并不工作-内的DOM元素ng-switch
是不是在这一点上创建的:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('/', {url: '/', templateUrl: 'index.html'})
.state('map', {url: 'map', templateUrl: 'map.html', controller: 'MapCtrl'})
}]);
app.controller('MapCtrl', ['$rootScope', '$scope', '$state', function MapCtrl($rootScope, $scope, $state) {
$scope.state = $state.current.name; // expose the state to the template so we can ng-switch. Apparently there's no better way: https://github.com/angular-ui/ui-router/issues/1482
$scope.$on('$viewContentLoaded', function mapContentLoaded(event, viewConfig) {
var mapElement = document.getElementById('map');
console.log('Attempting to create map into', mapElement);
var map = new google.maps.Map(mapElement); // <-- but mapElement will be null!
});
}]);
什么工作使用是setTimeout()
的控制器,它是易碎的50ms的,但那时创建的DOM元素。 可替换地,我可以设置的时间间隔,检查该存在map
DOM元素,并且当它的发现清除的时间间隔。
什么是搞清楚时的正确方法是ng-switch
已经呈现了DOM? 这是不是证明 。
这里的Plunkr 。