Accessing rendered DOM element

Question

I'm trying to access a DOM element after it gets rendered by AngularJS.

In my template I've this 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>

So, in template's controller I'm trying to get its new id:

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

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

But unfortunatelly I'm receiving pre-render code: {{'canvas_map_'+place.id}} and I want to get the rendered id name that is "canvas_map_2"... Somebody can help me?

score 1 · Accepted Answer · answered Jan 19 '18 at 05:39

1

You can use $timeout and $viewContentLoaded to achieve what you asked

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

answered Jan 19 '18 at 05:39

Ved

11,837
5
42
60

Thank you, but is it the better way to do it or is just a workaround? – vinoli Jan 19 '18 at 05:41
You can use it. I use same and never has any issue. Let me if you find something better – Ved Jan 19 '18 at 05:46
Perfect! I'll do it! – vinoli Jan 19 '18 at 05:47
I was reading this topic and the anwer's author recommended use .directives to realize DOM manipulation... https://stackoverflow.com/questions/27129829/angularjs-viewcontentloaded-fired-before-partial-view-appears – vinoli Jan 19 '18 at 14:44
Yes. My answer scope is limited . You DOM manipulation , than it must be inside directive. – Ved Jan 20 '18 at 06:26

Accessing rendered DOM element

1 Answers1