javascript - Angularjs 中的侧滑条

Question

我正在尝试使用 angularjs 制作侧滑条，但我卡住了。我的代码如下所示:

.html

<a class="button is-success newAlbumButton" ng-click="toggleSidebar()">New album</a>
<div class="list list-inset searchclass" >
  <div id="leftSlideBar" ng-show="$ctrl.sidebarOpen">
    <label>Choose name:</label>
    <input type="text" name="newAlbum" placeholder="album name"> 
    <a class="button is-info" >Save</a>
  </div>
</div>

组件.js

vm.toggleSidebar = function(){
   vm.sidebarOpen = !vm.sidebarOpen;
};

vm.closeSidebar = function(){
    vm.sidebarOpen = false;
};

.css

#leftSlideBar{
    background-color: red;
    width: 337px;
    height: 20%;
    display: block;
    position: absolute;
    left: -100px;
    top: 0px;
    padding-top: 20px;
    margin-top: 37px;
    transition:left 0.3s linear;
}

因此，当我点击 New album 按钮时，我希望它滑动打开。单击 Save 按钮应将其关闭。现在侧边栏一直保持打开状态。我希望它以关闭的方式开始。我的按钮根本不起作用。 :/ 感谢您的回答。

Answer 1

我觉得

ng-click="toggleSidebar()"

应该是

ng-click="$ctrl.toggleSidebar()"