为什么我不能 ng-include sidenav？

Question

我使用 MaterializeCSS 创建了一个 sidenav，它运行良好。我还使用 angular 为它创建了一个控制器。但是，当我尝试将 sidenav 包含在另一个 html 中时，它不起作用。我只能看到触发按钮，但当我点击它时没有任何反应，控制台中也没有错误。

这是sidenav：

    <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>

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

Answer 1

添加 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>

Answer 2

问题是范围界定问题。 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

为什么我不能 ng-include sidenav？

Why can't I ng-include a sidenav?

html

angularjs

materialize

angularjs-ng-include