javascript - ng-switch はいつレンダリングを終了しましたか?

Question

私はui-routerを使用しており、id で指定された DOM 要素をパラメーターとして受け取るウィジェットをインスタンス化しようとしています。この DOM 要素は a<div ng-switch>にあり、要素の存在が保証されているときにウィジェット コンストラクターを呼び出したいと考えています。

<div ng-switch on="state">
  <div ng-switch-when="map">
    <div id="map"></div>
  </div>
</div>

ui-routerのライフサイクルから、 に接続する必要があることがわかりました$viewContentLoaded。ただし、これは機能しませんng-switch。その時点では 内の DOM 要素は作成されません。

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 要素の存在を確認し、見つかったときに間隔をクリアすることもできます。

DOM がいつレンダリングされたかを把握する適切な方法は何ですか? ng-switchこれは文書化されていません。

これがPlunkrです。