javascript - 从 ng-include html 访问元素

Question

我有一个 html，它包含在由几个不同 Controller 控制的几个 html 中。我想在每个 Controller 中通过 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 个 html 中发布一个:

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

现在在我的 Controller 中，我想访问例如“tom_nav_bar”id，但我做不到:

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

此处 getElementById 返回 null。

Answer 1

您不应该从 Controller 访问 DOM。这几乎无法测试，难以重构并增加了困惑，因为 DOM 操作与表示逻辑混合在一起

我建议您使用以下模板创建一个简单的指令“insert-navbar”:

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

然后在每个需要用到的地方都这样使用:

<insert-navbar>

然后，在该指令的 link 函数中，您应该能够像这样访问该元素:

link: function(scope, element) {
  element[0].querySelector('#tom_nav_bar')
}