Angular Material：$mdDialog 的奇怪行为（未关闭）答案

【问题标题】：Angular Material: Weird behaviour of $mdDialog (not closing)Angular Material：$mdDialog 的奇怪行为（未关闭）
【发布时间】：2015-11-23 20:29:43
【问题描述】：

我已经开始了一个非常小的项目来使用 Angular + Angular Material。我一直在尝试实现一个 $mdDialog，但它不起作用。对话框可以通过指定按钮打开，但关闭部分不起作用。我按下应该关闭对话框的按钮，几秒钟内没有任何反应，然后它关闭并且无法再按下打开对话框的按钮......我真的不知道这里发生了什么。这些是文件：

<!Doctype html>
<html>
  <head>
    <title>Some App</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!--<link rel="stylesheet" href="../node_modules/angular-material/angular-material.css">-->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc4/angular-material.min.css">
    <script src="../node_modules/angular/angular.js"></script>
    <script src="../node_modules/angular-aria/angular-aria.js"></script>
    <script src="../node_modules/angular-animate/angular-animate.js"></script>
    <!--<script src="../node_modules/angular-material/angular-material.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc4/angular-material.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body layout="row" ng-app="SomeApp" ng-controller="MainCtrl">
    <md-sidenav md-is-locked-open="true" md-component-id="left" class="md-sidenav-left md-whiteframe-z2" style="width:200px">
      <md-list layout="column">
        <md-subheader class="md-no-sticky">Items</md-subheader>
        <md-list-item ng-repeat="item in items" ng-click="$parent.activeItem = item">
          {{item}}
        </md-list-item>
        <md-button ng-click="askNewItem($event)" class="md-raised" layout-align="center center">ADD NEW ITEM</md-button>
      </md-list>
    </md-sidenav>
    <md-content>
      This is {{activeItem}}
    </md-content>
  </body>
</html>

，并且：

angular.module( 'SomeApp', [ 'ngMaterial' ] )
  .controller('MainCtrl', function($scope, $mdDialog, $mdSidenav) {
    $scope.activeItem = "1";
    $scope.items = [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7"
    ];

    $scope.askNewItem = function($event) {
      var parentEl = angular.element(document.body);
      $mdDialog.show({
        controller: DialogController,
        parent: parentEl,
        targetEvent: $event,
        template:
          '<md-button class="md-raised" ng-click="hide()" class="md-primary">CLOSE</md-button>'
      });
    };

    function DialogController($scope, $mdDialog) {
      $scope.hide = function() {
        $mdDialog.hide();
      };
      $scope.close = function() {
        $mdDialog.cancel();
      };
    }
  });

我只是找不到错误...有什么想法吗？谢谢。

【问题讨论】：

标签： javascript angularjs material-design angular-material

【解决方案1】：

我将您的代码直接放入plunker and it works。因此，您发布的代码没有任何问题。也许在浏览器中检查控制台以查看其他潜在的错误消息。

//would not let me post plunker link without a code block

也许您使用的是过时版本的 Angular 或 Angular Material。

【讨论】：

我明白了...我正在使用 Electron 应用程序中的代码，但基本上，如果它在 Chrome 中运行，这个脚本应该在 Electron 中运行。另外，我在谷歌上找不到任何提到 Electron + Angular 不起作用的东西，集成控制台也没有抛出任何东西......编辑：我还使用所有东西的最新版本，Angular[-animate，-aria ] 1.4.8，Angular-Material 1.0.0-rc4（也尝试使用 0.11.x 和 0.10.x）
只是为了确定...您是否包括了 ngAnimate 和 ngAria？ Angular Material 需要...如果对话框已经打开，您可以确定您这样做了。但除此之外，需要查看您的其他代码以查看可能导致它的原因。你试过 plunker，它在你的应用上是这样工作的吗？
是的，我确实包含了它们，并且 plunker 工作了，这与我使用的代码完全相同，除了 package.json 和 style.css 之外没有其他文件，但我已经检查过了， style.css，如果省略，不会改变任何东西（除了侧边栏的宽度）
我应该补充一点，如果我按下按钮关闭对话框，对话框不仅会在 5 秒后关闭，而且打开它的按钮不再可点击，而且项目列表中的也不再可点击，就像在此过程中每次 ng-click 都中断了
我刚刚发现这个问题只出现在Electron的预编译版本中，这很可能是Electron的一个bug。我提交了一个问题，一旦问题得到解决，我将发布关于这个问题的答案。