ng-if 里面的 md-menu 没有正确打开

Question

我在 <md-menu> 标签内有一个 ng-if，当用户单击菜单中的项目时，它会切换更多信息。但是，当我单击菜单项时，菜单关闭。当我重新打开它时，DOM 显示额外信息正在显示，但它实际上并未显示在菜单中，并且菜单未调整大小以适应应有的内容。

这是我的菜单代码：

<md-menu>
    <md-button aria-label="Open Notifications Menu" ng-click="$mdOpenMenu($event)">
        <md-icon md-svg-icon="bell"></md-icon>
    </md-button>
    <md-menu-content width="5">
        <md-menu-item ng-repeat="notification in vm.notificationList">
            <div aria-label="Notification" ng-click="vm.showDetails(notification)" md-prevent-menu-close="md-prevent-menu-close">
                <div layout="column">
                    <div flex layout="row" layout-align="start center">
                        <span flex><b>{{notification.title}}</b></span>
                        <span style="opacity: 0.5">{{vm.getTime(notification)}}</span>
                    </div>
                    <div ng-show="notification.showDetails">
                        <span style="opacity: 0.7">{{notification.details}}</span>
                    </div>
                </div>
            </div>
        </md-menu-item>
    </md-menu-content>
</md-menu>

这是打字稿中 ng-click 的函数：

showDetails(message: any): void {
    message.showDetails = !message.showDetails;
}

编辑

我使用 md-prevent-menu-close 解决了菜单关闭的问题...呃。我已经更新了 html。问题还是一样，菜单没有改变大小来显示新数据。

编辑

我通过删除 md-button 并将其替换为 div 解决了内容不显示的问题。我相应地更新了 html。现在唯一的问题是菜单不会调整其高度以整齐地适应新内容。

Answer 1

使用 ng-show 而不是 ng-if。如果不满足某些条件，ng-if 会永久删除 DOM 中的元素。 ng-show 只是在元素是否隐藏之间切换。

Answer 2

这是你想要的吗？ - CodePen

标记

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
  <md-menu>
      <md-button aria-label="Open Notifications Menu" ng-click="$mdOpenMenu($event)">
          Bell
      </md-button>
      <md-menu-content width="5">
          <md-menu-item ng-repeat="notification in vm.notificationList" ng-click="vm.showDetails($index)" md-prevent-menu-close="md-prevent-menu-close" aria-label="Notification">
            <div layout="column" flex>
              <div flex layout="row" layout-align="start center">
                <span flex><b>{{notification.title}}</b></span>
                <span style="opacity: 0.5">22-08-2016 09:06</span>
              </div>
              <div ng-if="notification.showDetails">
                <span style="opacity: 0.7">{{notification.details}}</span>
              </div>
            </div>
          </md-menu-item>
      </md-menu-content>
  </md-menu>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function() {
  var vm = this;

  vm.notificationList = [
    {title: "Read", details: "Enjoy the book", showDetails: false},
    {title: "Eat", details: "You're hungry", showDetails: false},
    {title: "Dring", details: "Have a pint of lager", showDetails: false}
  ]

  vm.showDetails = function (index) {
    vm.notificationList[index].showDetails = !vm.notificationList[index].showDetails;
  }
});

ng-if 里面的 md-menu 没有正确打开

ng-if inside of md-menu not opening properly

angularjs

material-design

angular-material

编辑

编辑