Получить clientHeight из div, используя Angular?

Question

Получить clientHeight из div, используя Angular?

0

Мне нужно получить clientHeight из div? Как это сделать в Angular? (Меня не волнует, если это плохая практика на данный момент)

Я пробовал тысячу вещей, некоторые из которых можно увидеть в этом плунжере. Код ниже работает вне контроллера, но не для clientHeight:

    $scope.myElem = angular.element(document.getElementById('testDiv')); 
    $scope.myAttr = $scope.myElem.attr('name');

Я не знаю, как получить атрибуты из директивы. Кажется, что все примеры используют только ссылку с именованными атрибутами. Я не буду устанавливать clientHeight, мне просто нужно вернуть его.

VSO 17 июль 2015, в 02:59

Источник

0

В вашей директиве вы можете получить clientHeight следующим образом: elem[0].clientHeight . Ваша DOM работает в вашей директиве, а не в вашем контроллере.
Eric Martinez 17 июль 2015, в 00:52
0

Ты потрясающий Эрик. Почему это ноль, хотя? Убран плункер: plnkr.co/edit/0VMeFAMEnc0XeQWJiLHm?p=preview
VSO 17 июль 2015, в 00:58
2

Я собираюсь угадать в этом. Потому что example-directive не является native (если можно так назвать) элементом, поэтому у него нет этих свойств. Если вы хотите, чтобы он имел высоту, вы можете изменить свою директиву на <div example-directive></div> и изменить restrict на A Так что, если вы сделаете эти изменения и добавите некоторый контент в div, он запишет некоторую высоту.
Eric Martinez 17 июль 2015, в 01:02
0

@EricMartinez только что проверил это в моем Plunker и да, вы правы
Phil 17 июль 2015, в 01:03
0

Спасибо огромное, ребята.
VSO 17 июль 2015, в 01:05
0

Добро пожаловать
Eric Martinez 17 июль 2015, в 01:05
0

@Eric Martinez: Я чувствую, что спрашиваю задницу, но не могли бы вы взглянуть на это и дать мне знать, почему свойство scrollTop может не отображаться? plnkr.co/edit/ZyFI13DN5Q38qSGAdtf2?p=preview
VSO 17 июль 2015, в 01:26
1

Это потому, что когда вы вызываете elem вы вызываете div example-directive , и div с полосой прокрутки является его дочерним элементом. Таким образом, у вас есть два варианта: в вашей текущей директиве получить первые дочерние элементы и связать (используя bind или on ) событие scroll или вы можете создать вторую директиву для div, содержащегося в div.html, и напрямую получить scrollTop .
Eric Martinez 17 июль 2015, в 01:44
1

@Eric Martinez: Вы действительно сделали мой день, честно. Благодаря тонну.
VSO 17 июль 2015, в 01:49

Показать ещё 7 комментариев

Теги:

javascript

html

angularjs

css

1 ответ

Ещё вопросы

В вашей директиве вы можете получить clientHeight следующим образом: elem[0].clientHeight . Ваша DOM работает в вашей директиве, а не в вашем контроллере.
Ты потрясающий Эрик. Почему это ноль, хотя? Убран плункер: plnkr.co/edit/0VMeFAMEnc0XeQWJiLHm?p=preview
Я собираюсь угадать в этом. Потому что example-directive не является native (если можно так назвать) элементом, поэтому у него нет этих свойств. Если вы хотите, чтобы он имел высоту, вы можете изменить свою директиву на <div example-directive></div> и изменить restrict на A Так что, если вы сделаете эти изменения и добавите некоторый контент в div, он запишет некоторую высоту.
@EricMartinez только что проверил это в моем Plunker и да, вы правы
@Eric Martinez: Я чувствую, что спрашиваю задницу, но не могли бы вы взглянуть на это и дать мне знать, почему свойство scrollTop может не отображаться? plnkr.co/edit/ZyFI13DN5Q38qSGAdtf2?p=preview
Это потому, что когда вы вызываете elem вы вызываете div example-directive , и div с полосой прокрутки является его дочерним элементом. Таким образом, у вас есть два варианта: в вашей текущей директиве получить первые дочерние элементы и связать (используя bind или on ) событие scroll или вы можете создать вторую директиву для div, содержащегося в div.html, и напрямую получить scrollTop .
@Eric Martinez: Вы действительно сделали мой день, честно. Благодаря тонну.

Phil · Accepted Answer · 2015-07-16T23-45-00.000Z

Использование директивы было бы самым простым способом. DOM полностью реализуется в функции link (post link), поэтому свойства элемента должны быть доступны.

Например

.directive('logClientHeight', function($log) {
    return {
        link: function(scope, element) {
            $log.debug(element.prop('clientHeight'));
        }
    }
});

Plunker

Обратите внимание, что для элемента, имеющего типичные свойства элемента, он должен быть типичным элементом.

_{Спасибо Эрик Мартинес за это.}

Спасибо большое, за проголосовали. Может быть еще один или два вопроса, если вы готовы помочь. Попытка сделать это jsfiddle.net/rs3prkfm в угловых. Ваш пример текста попадает домой, я был на этом весь день. Думаю, это то, что я получаю, не зная основ.
Можете ли вы взглянуть на последнюю вещь, пожалуйста? Я абсолютно понимаю, если вы этого не сделаете, и ценю помощь, которую я уже получил. С учетом сказанного мне нужно свойство 'ScrollTop': plnkr.co/edit/ZyFI13DN5Q38qSGAdtf2?p=preview Любые идеи о том, почему он застрял на 0?
Не сохранил обновление, мой плохой. Но похоже, что он либо не получает, либо не обновляет его. Старая ссылка все еще работает, только с сохраненными изменениями.
@ VSO, потому что ваш элемент не то, что прокручивает; <div> внутри него есть. Исправлено здесь ~ plnkr.co/edit/ZVuhefNxTKydrJdyLn67?p=preview
Я знаю, что мои повторения «спасибо» на данный момент излишни, но вы действительно помогли мне здесь.