Question

我使用MaterialiseCSS创建了一个sidenav，它的工作正常。我还使用角度为它创建了一个控制器。但是，当我尝试将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>

我可以编辑我的帖子并向您显示控制器，但我不认为它非常重要，因为我实际上并没有做任何事情。我只是初始化sidenav。

Answer 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

Answer 2

添加href =＆＃34;＃＆＃34;有所作为？

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

为什么我不能包括sidenav？

2 个答案: