ng-if在md-menu内部未正确打开

Question

我在C:\Python27\Scripts>pip install matplotlib Collecting matplotlib Downloading matplotlib-1.5.2.tar.gz (51.6MB) 100% |################################| 51.6MB 19kB/s Complete output from command python setup.py egg_info: ============================================================================ Edit setup.cfg to change the build options BUILDING MATPLOTLIB matplotlib: yes [1.5.2] python: yes [2.7.11 (v2.7.11:6d1b6a68f775, Dec 5 2015, 20:40:30) [MSC v.1500 64 bit (AMD64)]] platform: yes [win32] REQUIRED DEPENDENCIES AND EXTENSIONS numpy: yes [version 1.11.1] dateutil: yes [dateutil was not found. It is required for date axis support. pip/easy_install may attempt to install it after matplotlib.] pytz: yes [pytz was not found. pip will attempt to install it after matplotlib.] cycler: yes [cycler was not found. pip will attempt to install it after matplotlib.] tornado: yes [tornado was not found. It is required for the WebAgg backend. pip/easy_install may attempt to install it after matplotlib.] pyparsing: yes [pyparsing was not found. It is required for mathtext support. pip/easy_install may attempt to install it after matplotlib.] libagg: yes [pkg-config information for 'libagg' could not be found. Using local copy.] freetype: no [The C/C++ header for freetype (ft2build.h) could not be found. You may need to install the development package.] png: no [The C/C++ header for png (png.h) could not be found. You may need to install the development package.] qhull: yes [pkg-config information for 'qhull' could not be found. Using local copy.] OPTIONAL SUBPACKAGES sample_data: yes [installing] toolkits: yes [installing] tests: yes [nose 0.11.1 or later is required to run the matplotlib test suite. Please install it with pip or your preferred tool to run the test suite / mock is required to run the matplotlib test suite. Please install it with pip or your preferred tool to run the test suite] toolkits_tests: yes [nose 0.11.1 or later is required to run the matplotlib test suite. Please install it with pip or your preferred tool to run the test suite / mock is required to run the matplotlib test suite. Please install it with pip or your preferred tool to run the test suite] OPTIONAL BACKEND EXTENSIONS macosx: no [Mac OS-X only] qt5agg: no [PyQt5 not found] qt4agg: no [PySide not found; PyQt4 not found] gtk3agg: no [Requires pygobject to be installed.] gtk3cairo: no [Requires cairocffi or pycairo to be installed.] gtkagg: no [Requires pygtk] tkagg: yes [installing; run-time loading from Python Tcl / Tk] wxagg: no [requires wxPython] gtk: no [Requires pygtk] agg: yes [installing] cairo: no [cairocffi or pycairo not found] windowing: yes [installing] OPTIONAL LATEX DEPENDENCIES dvipng: no ghostscript: no latex: no pdftops: no OPTIONAL PACKAGE DATA dlls: no [skipping due to configuration] ============================================================================ * The following required packages can not be built: * freetype, png ---------------------------------------- Command "python setup.py egg_info" failed with error code 1 in c:\users\foo\a ppdata\local\temp\pip-build-zxfsow\matplotlib\ 标记内部有ng-if，当用户点击菜单中的项目时会切换更多信息。但是，当我单击菜单项时，菜单将关闭。当我重新打开它时，DOM显示额外信息正在显示，但它实际上并没有显示在菜单中，并且菜单没有调整大小以适应应该存在的内容。

这是我的菜单代码：

<md-menu>

以下是typescript中<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; } ... duh解决了关闭菜单的问题。我已经更新了html。问题仍然是相同的，菜单不会改变大小以显示新数据。

修改

我通过移除md-prevent-menu-close并将其替换为md-button来修复了未显示内容的问题。我相应地更新了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;
  }
});