Не удается инициализировать элемент в шаблоне ng-include - PullRequest
Новая
       16

Не удается инициализировать элемент в шаблоне ng-include

0 голосов
/ 27 ноября 2018

Я создаю SPA, который можно описать следующим образом

enter image description here

Объяснение: - В контроллере существует объект itemsиз component2.- Пользователь имеет возможность управлять этим объектом, используя 4 различных действия (кнопки на компоненте 1). - Эти действия (для простоты) могут относиться к другому виду графика.т.е. когда нажата операция 1, данные внутри объекта items могут быть построены в виде круговой диаграммы, когда выбрано действие 2, они будут отображены в виде гистограммы и т. д.- Эти графики будут появляться в различных шаблонах ng-include.

В общем, и до сих пор, как я подошел, это использовать сервис (внедренный в оба компонента).Когда нажимаются кнопки действий, событие транслируется из службы, и когда это событие достигает компонента 2, его контроллер устанавливает соответствующую переменную (действие-1-на, действие-2-на, действие-3-на и т. Д.) ВЗначение true и содержимое ng-include появляется.

Проблема, с которой я сталкиваюсь, заключается именно в последнем шаге.Скажем, например, что внутри одного из этих шаблонов (например, action1.html) у меня есть элемент range, и я хочу инициализировать его как элемент noUiSlider .Для этого на функции $onInit контроллера component2 я добавляю следующий код: 

var slider = document.getElementById('test-slider');

noUiSlider.create(slider, {
    start: [20],
    step: 1,
    orientation: 'horizontal', 
    range: {
        'min': 0,
        'max': 100
        },
    format: wNumb({
        decimals: 0
        })
    });

Я получаю сообщение об ошибке:

TypeError: Невозможно прочитать свойство 'nodeName' со значением null

, и поэтому я предполагаю, что javascript не может найти элемент с id # test-slider

Итак, что я хочуСпросите, прежде чем решить эту ошибку, является ли этот подход (с обслуживанием и двумя компонентами) разумным и «угловатым» или есть более прямой и ясный способ сделать это (возможно, ui-route?).Я предпочитаю работать с более угловатым способом, чем пытаться решить эту ошибку.Если способ, которым я подхожу, в порядке, как я собираюсь сделать этот элемент инициализированным из функции $ onInit?Стоит ли добавлять какие-то задержки?

Любые идеи и мнения приветствуются.

...