访问渲染的 DOM 元素

Question

我正在尝试在 AngularJS 渲染后访问 DOM 元素。

在我的模板中，我有这个 div：

<ion-view view-title="MAP" name="tab-map">
    <ion-content has-tabs="true" style="text-align:center;">
        <div style="width:100%;height:400px;" ng-attr-id="{{'canvas_map_'+place.id}}" class="map"></div>
    </ion-content>
</ion-view>

所以，在模板的控制器中，我试图获取它的新 id：

var mapId = document.querySelector('.map').id;

console.log("Map id: "+mapId);

但不幸的是，我收到了预渲染代码：{{'canvas_map_'+place.id}}，我想获得渲染的 ID 名称为“canvas_map_2”...有人可以帮助我吗？

Answer 1

您可以使用$timeout 和$viewContentLoaded 来实现您的要求

   $scope.$on('$viewContentLoaded', (event) => {
              $timeout(()=> {//When $timeout used , the code inside it is executed in next $digest cycle
                var mapId = document.querySelector('.map').id;
                console.log("Map id: "+mapId);
          },0);
    }