AngularJS и DOM: получить элемент внутри ng-view

Я просто пытаюсь получить высоту элемента в моем ng-представлении, используя DOM, в моем контроллере AngularJS.

Я получаю Uncaught TypeError: document.getElementsByClassName(...).getElementById is not a function для следующего кода, расположенного в моем контроллере AngularJS.

// I do a hardcoded timeout for now to wait for ng-view to load.
setTimeout(function(){ 
  var theView = document.getElementsByClassName("view-container")[0].getElementById("myView").getElementsByClassName("container")[0];
}, 10000);

Вот как выглядит мой HTML:

<div class="view-container">
    <ng-view class="view-frame ng-scope" autoscroll="" id="myView">
        <div class="container ng-scope">
            <div class="row">
                <!-- content -->
            </div>
        </div>
    </ng-view>
</div>

Я проверял правописание getElementById много раз. Я упускаю какую-то странную вещь, как AngularJS, ng-view и DOM просто не любят работать вместе? Или есть «угловой» способ получить высоту элемента в моем ng-представлении вместо использования DOM?


person chakeda    schedule 13.11.2015    source источник
comment
Просто чтобы объяснить вашу ошибку: getElementById - это метод для document. getElementsByClassName() возвращает массив элементов. Вы не можете вызвать getElementById для элемента.   -  person Antiga    schedule 14.11.2015
comment
@Антига, понятно. У меня мало опыта работы с DOM — как бы вы посоветовали мне добиться этого?   -  person chakeda    schedule 14.11.2015
comment
Я не уверен, почему вы связываете кучу селекторов вместе. Вы могли бы просто дать этому div id и getElementById. Или, как сейчас (при условии, что нет других элементов с контейнером class), вы можете отрезать всю первую часть и просто вызвать getElementsByClassName("container")[0];. Вам не нужно нацеливаться, а затем повторно нацеливаться.   -  person Antiga    schedule 14.11.2015
comment
HTML в <ng-view> является динамическим, и у меня есть несколько container. Я думаю, что мой targetcontainer всегда является третьим контейнером: я попробую это очень быстро.   -  person chakeda    schedule 14.11.2015


Ответы (1)


Вы не можете вызвать getElementById для элемента, только документ поддерживает эту функцию.

Просто делать:

setTimeout(function(){ 
  var theView = document.getElementById("myView").getElementsByClassName("container")[0];
}, 10000);
person PDN    schedule 13.11.2015
comment
На самом деле, [да] (developer.mozilla.org/en -US/docs/Web/API/Document/) - person PDN; 14.11.2015
comment
Достаточно честно +общедоступное отображаемое имя. Кроме того, довольно не по теме, я думаю, что ng-view имеет обратный вызов, когда он загружается? Определенно будет лучше, чем timeout. Это больше для ОП, я знаю, что это был не его вопрос. - person Antiga; 14.11.2015
comment
Спасибо, ваше решение сработало. Не знаю, почему кто-то минусовал вас за это. - person chakeda; 14.11.2015
comment
@Antiga, да, возможно, но это был бы другой вопрос - person chakeda; 14.11.2015