Angular Material: странное поведение $mdDialog (не закрывается)

Я начал очень небольшой проект, чтобы немного поиграть с 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 material-design angularjs angular-material
person Zocker3333    schedule 23.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я поместил ваш код прямо в plunker, и он работает. Так что нет ничего плохого в коде, который вы разместили. Возможно, проверьте консоль в вашем браузере на наличие других потенциальных сообщений об ошибках.

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

Возможно, вы используете устаревшую версию Angular или Angular Material.

person ngDeveloper    schedule 23.11.2015
comment
Понятно... Я использую код внутри приложения Electron, но в основном этот скрипт должен работать в Electron, если он работает в Chrome. Кроме того, я не могу найти в Google ничего, что Electron + Angular не работает, встроенная консоль тоже ничего не выдает... Редактировать: я также использую самые последние версии всего, Angular[-animate, -aria ] 1.4.8, Angular-Material 1.0.0-rc4 (также пробовал с 0.11.x и 0.10.x) - person Zocker3333; 24.11.2015
comment
Просто чтобы быть уверенным ... вы включили ngAnimate и ngAria? Требуется Angular Material... уверен, что вы это сделали, если диалоговое окно уже открыто. Но помимо этого, нужно будет увидеть ваш другой код, чтобы увидеть, что может быть причиной этого. Вы пробовали плункер, так он работает в вашем приложении? - person ngDeveloper; 24.11.2015
comment
Да, я включил их, и плункер сработал, это тот же самый код, который я использую, других файлов нет, кроме package.json и style.css, но я уже проверил, style.css, если не учитывать , ничего не меняет (кроме ширины сайдбара) - person Zocker3333; 24.11.2015
comment
Возможно, я должен добавить, что если я нажму кнопку, чтобы закрыть диалоговое окно, диалоговое окно не только закроется примерно через 5 секунд, и кнопка для его открытия больше не будет нажиматься, но и элементы в списке больше не будут нажиматься либо, как и каждый ng-click ломался во время процесса - person Zocker3333; 24.11.2015
comment
Я только что узнал, что эта проблема возникает только в предварительно собранной версии Electron, что, вероятно, делает ее ошибкой Electron. Я отправил вопрос и опубликую ответ на этот вопрос, как только проблема будет решена. - person Zocker3333; 24.11.2015