Question

我有一个html包含在由几个不同控制器控制的几个htmls中。我想在每个控制器中通过id访问包含html的元素。我将在每个html中包含的html下面发布：

<ul class="nav menu" >
    <li id="tom_nav_bar"><a href="/#tom">
        <svg class="glyph stroked dashboard-dial">
            <use xlink:href="#stroked-dashboard-dial"></use>
        </svg>
        BEX Dashboard</a></li>
    <li id="sonar_nav_bar"><a href="#/sonar">
        <svg class="glyph stroked chevron right">
            <use xlink:href="#stroked-chevron-right"/>
        </svg>
        Sonar</a></li>
    <li id="teamcity_nav_bar"><a href="/#teamcity">
        <svg class="glyph stroked chevron right">
            <use xlink:href="#stroked-chevron-right"/>
        </svg>
        TeamCity</a></li>
    <li id="kpi_definitions_nav_bar"><a href="#/kpi_definitions">
        <svg class="glyph stroked chevron right">
            <use xlink:href="#stroked-chevron-right"/>
        </svg>
        Kpi Definitions</a></li>
    <li id="credit_risk_custom_report_nav_bar"><a href="#/department_custom_report">
        <svg class="glyph stroked chevron right">
            <use xlink:href="#stroked-chevron-right"/>
        </svg>
        CREDITRISK Custom Report (beta)</a></li>
</ul>

让我们将代码命名为html：navbar.html。现在我将从4个htmls发布一个，其中包含上面的代码：

<div ng-include src="'navbar.html'" class="col-sm-3 col-lg-2 sidebar"></div>

现在在我的控制器中我想访问例如'tom_nav_bar'id，但我无法做到：

document.getElementById("tom_nav_bar").className = "active";

这里getElementById返回null。

Answer 1

您不应该从控制器访问DOM。这几乎不可能测试，难以重构并增加混淆，因为DOM操作与表示逻辑混合

我建议您创建一个简单的指令＆＃39; insert-navbar＆＃39;使用以下模板：

<insert-navbar>

并在每个需要使用的地方使用它：

link

然后，在该指令的link: function(scope, element) { element[0].querySelector('#tom_nav_bar') }函数内，您应该能够像这样访问元素：

dt[, ("col1"):=col2]

Answer 2

首先，您的语法可能有误https://docs.angularjs.org/api/ng/directive/ngInclude

另外，也许是因为你的部分还没有在调用时加载

document.getElementById

尝试将其放入您的脚本中：

function GetElement(idselector) {
    document.getElementById(idselector).className = "active";
}

然后当您包含导航栏时，请在ng-include：

的onload参数中使用此功能

<div 
    ng-include="navbar.html" 
    [onload=GetElement("tom_nav_bar")]
    class="col-sm-3 col-lg-2 sidebar">
</div>

来自ng-include html的访问元素

2 个答案: