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>

component.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()"

Angularjs中的侧滑杆

1 个答案: