无法初始化ng-include模板中的元素

Question

我正在建立一个可以通过下图描述的SPA

说明： -items的控制器中存在对象component2。 -用户可以通过使用4种不同的操作（component1上的按钮）来管理该对象 -这些动作（为简单起见）可以引用另一种情节。即，当按下动作1时，items对象内部的数据可以绘制为饼图，选择动作2时将绘制为直方图，依此类推。 -这些图将出现在各种ng-include模板中。

通常，到目前为止，我采用的方法是使用服务（注入到两个组件中）。单击操作按钮时，将从服务中广播一个事件，并且当此事件到达组件2时，其控制器会将相应的变量（action-1-on，action-2-on，action-3-on等）设置为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：无法读取null的属性“ nodeName”

然后，我认为javascript无法找到ID为＃test-slider的元素

因此，在解决此错误之前，我想问的是，这种方法（带有服务和两个组件）是否合理且“折衷”，或者是否有更直接，更清晰的方法（也许是ui-route） ？）。与尝试解决此错误相比，我更喜欢采用更棱角分明的方法。如果我使用的方式还可以，我该如何通过$ onInit函数初始化该元素？我应该添加某种延迟吗？

欢迎任何想法和意见。