为什么我不能 ng-include 一个 sidenav？答案

【问题标题】：Why can't I ng-include a sidenav?为什么我不能 ng-include 一个 sidenav？
【发布时间】：2016-09-02 17:45:30
【问题描述】：

我使用 MaterializeCSS 创建了一个 sidenav，它工作正常。我还使用 angular 为它创建了一个控制器。但是，当我尝试将 sidenav 包含在另一个 html 中时，它不起作用。我只能看到触发按钮，但是当我单击它时，什么也没有发生，控制台中也没有错误。

这是侧导航：

    <div>

<ul id="slide-out" class="side-nav">
  <li><div class="userView" ng-controller = "accountCtrl">
    <img class="background" src="img/wood.jpg">
    <a href="#!user"><img class="circle" src="img/profile-picture.jpg"></a>
    <a href="#!name"><span class="white-text name">{{user.firstName}} {{user.lastName}}</span></a>
    <a href="#!email"><span class="white-text email">{{user.email}}</span></a>
  </div></li>

  <li><a><i class="material-icons">today</i>Today</a></li>
  <li><a><i class="material-icons">perm_identity</i>Account</a></li>
  <li><a><i class="material-icons">assignment</i>Projects</a></li>
  <li><a><i class="material-icons">perm_media</i>Gallery</a></li>

  <li><a class="subheader"></a></li>
  <li><a class="subheader"></a></li>

  <li><div class="divider"></div></li>
  <li><a><i class="material-icons">settings</i>Account Settings</a></li>
</ul>

<!-- This is the button I can see when the file is included -->

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-large waves-effect waves-light red button-collapse" 
  data-activates="slide-out"><i class="material-icons">label_outline</i></a>
</div>

</div>

这是另一个 html 文件中的 ng-include。

 <div ng-include = "'partials/dashboard.html'" ng-controller = "dashboardCtrl"></div>

我可以编辑我的帖子并向您展示控制器，但我认为它不是很重要，因为我并没有真正做任何事情。我只是在初始化 sidenav。

【问题讨论】：

那有什么问题呢？ sidenav 没有被包含在 DOM 中还是没有链接到控制器？
它不在 DOM 中。当我点击按钮时，sidenav 应该会出现，但没有任何反应。它链接到控制器，因为我自己测试了它（没有在任何地方包含它）并且工作正常。
我认为应该有一些隐藏内容的类
@r.j 在哪里？如果您正在谈论包含sidenav的文件，那么它完全是空的。我只有 ng-include。
你确定你有正确的dashboard.html路径吗？

标签： html angularjs materialize angularjs-ng-include

【解决方案1】：

问题是范围问题。 ng-include 指令创建一个新的范围，该范围在原型上继承自封闭范围。 ng-controller 指令在新作用域的父级上实例化控制器。

要让 AngularJS 在不创建新范围的情况下构建 html，请使用指令。

app.directive("dashboardComponent", function() {
    return {
        templateUrl: 'partials/dashboard.html',
        controller: "dashboardCtrl"
    };
});

用法：

<dashboard-component></dashboard-component>

欲了解更多信息，请参阅AngularJS Wiki -- Understanding Scopes -- ng-include

【讨论】：

【解决方案2】：

添加 href="#" 有影响吗？

<a class="btn-floating btn-large waves-effect waves-light red button-collapse" 
  data-activates="slide-out"><i class="material-icons">label_outline</i></a>

变成

<a href="#" class="btn-floating btn-large waves-effect waves-light red button-collapse" 
  data-activates="slide-out"><i class="material-icons">label_outline</i></a>

【讨论】：

不，完全没有区别。它只是重定向到 /#