角度材质:$mdDialog的怪异行为(未关闭）

Angular Material: Weird behaviour of $mdDialog (not closing)

本文关键字：mdDialog      更新时间：2023-09-26

我已经开始了一个非常小的项目，来玩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();
      };
    }
  });

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

我将您的代码直接放入plunker中，它就可以工作了。所以你发布的代码没有错。也许可以在浏览器的控制台中查看其他潜在的错误消息。

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

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

相关文章：