我正在尝试运行 Angular Material 示例对话框，但看到的是空白页

Question

我想要运行这个演示：

https://material.angularjs.org/latest/demo/dialog

但是我在浏览器运行这个时候出现空白页

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  <style>
  .dialogdemoBasicUsage #popupContainer {
  position: relative; }

  .dialogdemoBasicUsage .footer {
  width: 100%;
  text-align: center;
  margin-left: 20px; }

  .dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {
  font-size: 0.8em;
  margin-top: 50px; }

  .dialogdemoBasicUsage button {
  width: 200px; }

  .dialogdemoBasicUsage div#status {
  color: #c60008; }

  .dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
  margin-bottom: 0; }
  </style>

  <!--
    Your HTML content here
  -->  

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.min.js"></script>




  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
      angular.module('dialogDemo1', ['ngMaterial']).controller('AppCtrl', function($scope, $mdDialog) {
      $scope.status = '  ';
      $scope.customFullscreen = false;

      $scope.showAlert = function(ev) {
        // Appending dialog to document.body to cover sidenav in docs app
        // Modal dialogs should fully cover application
        // to prevent interaction outside of dialog
        $mdDialog.show(
          $mdDialog.alert()
            .parent(angular.element(document.querySelector('#popupContainer')))
            .clickOutsideToClose(true)
            .title('This is an alert title')
            .textContent('You can specify some description text in here.')
            .ariaLabel('Alert Dialog Demo')
            .ok('Got it!')
            .targetEvent(ev)
        );
      };

      $scope.showConfirm = function(ev) {
        // Appending dialog to document.body to cover sidenav in docs app
        var confirm = $mdDialog.confirm()
              .title('Would you like to delete your debt?')
              .textContent('All of the banks have agreed to forgive you your debts.')
              .ariaLabel('Lucky day')
              .targetEvent(ev)
              .ok('Please do it!')
              .cancel('Sounds like a scam');

        $mdDialog.show(confirm).then(function() {
          $scope.status = 'You decided to get rid of your debt.';
        }, function() {
          $scope.status = 'You decided to keep your debt.';
        });
      };

      $scope.showPrompt = function(ev) {
        // Appending dialog to document.body to cover sidenav in docs app
        var confirm = $mdDialog.prompt()
          .title('What would you name your dog?')
          .textContent('Bowser is a common name.')
          .placeholder('Dog name')
          .ariaLabel('Dog name')
          .initialValue('Buddy')
          .targetEvent(ev)
          .ok('Okay!')
          .cancel('I\'m a cat person');

        $mdDialog.show(confirm).then(function(result) {
          $scope.status = 'You decided to name your dog ' + result + '.';
        }, function() {
          $scope.status = 'You didn\'t name your dog.';
        });
      };

      $scope.showAdvanced = function(ev) {
        $mdDialog.show({
          controller: DialogController,
          templateUrl: 'dialog1.tmpl.html',
          parent: angular.element(document.body),
          targetEvent: ev,
          clickOutsideToClose:true,
          fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
        })
        .then(function(answer) {
          $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
          $scope.status = 'You cancelled the dialog.';
        });
      };

      $scope.showTabDialog = function(ev) {
        $mdDialog.show({
          controller: DialogController,
          templateUrl: 'tabDialog.tmpl.html',
          parent: angular.element(document.body),
          targetEvent: ev,
          clickOutsideToClose:true
        })
            .then(function(answer) {
              $scope.status = 'You said the information was "' + answer + '".';
            }, function() {
              $scope.status = 'You cancelled the dialog.';
            });
      };

      $scope.showPrerenderedDialog = function(ev) {
        $mdDialog.show({
          controller: DialogController,
          contentElement: '#myDialog',
          parent: angular.element(document.body),
          targetEvent: ev,
          clickOutsideToClose: true
        });
      };

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

        $scope.cancel = function() {
          $mdDialog.cancel();
        };

        $scope.answer = function(answer) {
          $mdDialog.hide(answer);
        };
      }
    });

  </script>
  </head>

<body>

<div ng-controller="AppCtrl" class="md-padding" id="popupContainer" ng-cloak>
  <p class="inset">
    Open a dialog over the app's content. Press escape or click outside to close the dialog and
    send focus back to the triggering button.
  </p>

  <div class="dialog-demo-content" layout="row" layout-wrap layout-margin layout-align="center">
    <md-button class="md-primary md-raised" ng-click="showAlert($event)"   >
      Alert Dialog
    </md-button>
    <md-button class="md-primary md-raised" ng-click="showConfirm($event)" >
      Confirm Dialog
    </md-button>
    <md-button class="md-primary md-raised" ng-click="showPrompt($event)"  >
      Prompt Dialog
    </md-button>
    <md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
      Custom Dialog
    </md-button>
    <md-button class="md-primary md-raised" ng-click="showTabDialog($event)" >
      Tab Dialog
    </md-button>
    <md-button class="md-primary md-raised" ng-if="listPrerenderedButton" ng-click="showPrerenderedDialog($event)">
      Pre-Rendered Dialog
    </md-button>
  </div>
  <p class="footer">Note: The <b>Confirm</b> dialog does not use <code>$mdDialog.clickOutsideToClose(true)</code>.</p>

  <div ng-if="status" id="status">
    <b layout="row" layout-align="center center" class="md-padding">
      {{status}}
    </b>
  </div>

  <div class="dialog-demo-prerendered">
    <md-checkbox ng-model="listPrerenderedButton">Show Pre-Rendered Dialog</md-checkbox>
    <p class="md-caption">Sometimes you may not want to compile the dialogs template on each opening.</p>
    <md-checkbox ng-model="customFullscreen" aria-label="Fullscreen custom dialog">Use full screen mode for custom dialog</md-checkbox>
    <p class="md-caption">Allows the dialog to consume all available space on small devices</p>
  </div>

  <div style="visibility: hidden">
    <div class="md-dialog-container" id="myDialog">
      <md-dialog layout-padding>
        <h2>Pre-Rendered Dialog</h2>
        <p>
          This is a pre-rendered dialog, which means that <code>$mdDialog</code> doesn't compile its
          template on each opening.
          <br/><br/>
          The Dialog Element is a static element in the DOM, which is just visually hidden.<br/>
          Once the dialog opens, we just fetch the element from the DOM into our dialog and upon close
          we restore the element back into its old DOM position.
        </p>
      </md-dialog>
    </div>
  </div>

</div>


</body>
</html>

有人知道问题出在哪里吗？

Answer 1

下面是工作代码。我所做的两项更改是

Included the ng-app tag on body to bootstrap

Included the angular material cdn

<html lang="en" >
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <style>
        .dialogdemoBasicUsage #popupContainer {
            position: relative; }

        .dialogdemoBasicUsage .footer {
            width: 100%;
            text-align: center;
            margin-left: 20px; }

        .dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {
            font-size: 0.8em;
            margin-top: 50px; }

        .dialogdemoBasicUsage button {
            width: 200px; }

        .dialogdemoBasicUsage div#status {
            color: #c60008; }

        .dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
            margin-bottom: 0; }
    </style>

    <!--
      Your HTML content here
    -->

    <!-- Angular Material requires Angular.js Libraries -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.js"></script>




    <!-- Your application bootstrap  -->
</head>

<body ng-app="dialogDemo">

<div ng-controller="AppCtrl" class="md-padding" id="popupContainer" ng-cloak>
    <p class="inset">
        Open a dialog over the app's content. Press escape or click outside to close the dialog and
        send focus back to the triggering button.
    </p>

    <div class="dialog-demo-content" layout="row" layout-wrap layout-margin layout-align="center">
        <md-button class="md-primary md-raised" ng-click="showAlert($event)"   >
            Alert Dialog
        </md-button>
        <md-button class="md-primary md-raised" ng-click="showConfirm($event)" >
            Confirm Dialog
        </md-button>
        <md-button class="md-primary md-raised" ng-click="showPrompt($event)"  >
            Prompt Dialog
        </md-button>
        <md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
            Custom Dialog
        </md-button>
        <md-button class="md-primary md-raised" ng-click="showTabDialog($event)" >
            Tab Dialog
        </md-button>
        <md-button class="md-primary md-raised" ng-if="listPrerenderedButton" ng-click="showPrerenderedDialog($event)">
            Pre-Rendered Dialog
        </md-button>
    </div>
    <p class="footer">Note: The <b>Confirm</b> dialog does not use <code>$mdDialog.clickOutsideToClose(true)</code>.</p>

    <div ng-if="status" id="status">
        <b layout="row" layout-align="center center" class="md-padding">
            {{status}}
        </b>
    </div>

    <div class="dialog-demo-prerendered">
        <md-checkbox ng-model="listPrerenderedButton">Show Pre-Rendered Dialog</md-checkbox>
        <p class="md-caption">Sometimes you may not want to compile the dialogs template on each opening.</p>
        <md-checkbox ng-model="customFullscreen" aria-label="Fullscreen custom dialog">Use full screen mode for custom dialog</md-checkbox>
        <p class="md-caption">Allows the dialog to consume all available space on small devices</p>
    </div>

    <div style="visibility: hidden">
        <div class="md-dialog-container" id="myDialog">
            <md-dialog layout-padding>
                <h2>Pre-Rendered Dialog</h2>
                <p>
                    This is a pre-rendered dialog, which means that <code>$mdDialog</code> doesn't compile its
                    template on each opening.
                    <br/><br/>
                    The Dialog Element is a static element in the DOM, which is just visually hidden.<br/>
                    Once the dialog opens, we just fetch the element from the DOM into our dialog and upon close
                    we restore the element back into its old DOM position.
                </p>
            </md-dialog>
        </div>
    </div>

</div>


</body>
<script type="text/javascript">
    /**
     * You must include the dependency on 'ngMaterial'
     */
    angular.module('dialogDemo', ['ngMaterial']).controller('AppCtrl', function($scope, $mdDialog) {
        $scope.status = '  ';
        $scope.customFullscreen = false;

        $scope.showAlert = function(ev) {
            // Appending dialog to document.body to cover sidenav in docs app
            // Modal dialogs should fully cover application
            // to prevent interaction outside of dialog
            $mdDialog.show(
                    $mdDialog.alert()
                            .parent(angular.element(document.querySelector('#popupContainer')))
                            .clickOutsideToClose(true)
                            .title('This is an alert title')
                            .textContent('You can specify some description text in here.')
                            .ariaLabel('Alert Dialog Demo')
                            .ok('Got it!')
                            .targetEvent(ev)
            );
        };

        $scope.showConfirm = function(ev) {
            // Appending dialog to document.body to cover sidenav in docs app
            var confirm = $mdDialog.confirm()
                    .title('Would you like to delete your debt?')
                    .textContent('All of the banks have agreed to forgive you your debts.')
                    .ariaLabel('Lucky day')
                    .targetEvent(ev)
                    .ok('Please do it!')
                    .cancel('Sounds like a scam');

            $mdDialog.show(confirm).then(function() {
                $scope.status = 'You decided to get rid of your debt.';
            }, function() {
                $scope.status = 'You decided to keep your debt.';
            });
        };

        $scope.showPrompt = function(ev) {
            // Appending dialog to document.body to cover sidenav in docs app
            var confirm = $mdDialog.prompt()
                    .title('What would you name your dog?')
                    .textContent('Bowser is a common name.')
                    .placeholder('Dog name')
                    .ariaLabel('Dog name')
                    .initialValue('Buddy')
                    .targetEvent(ev)
                    .ok('Okay!')
                    .cancel('I\'m a cat person');

            $mdDialog.show(confirm).then(function(result) {
                $scope.status = 'You decided to name your dog ' + result + '.';
            }, function() {
                $scope.status = 'You didn\'t name your dog.';
            });
        };

        $scope.showAdvanced = function(ev) {
            $mdDialog.show({
                        controller: DialogController,
                        templateUrl: 'dialog1.tmpl.html',
                        parent: angular.element(document.body),
                        targetEvent: ev,
                        clickOutsideToClose:true,
                        fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
                    })
                    .then(function(answer) {
                        $scope.status = 'You said the information was "' + answer + '".';
                    }, function() {
                        $scope.status = 'You cancelled the dialog.';
                    });
        };

        $scope.showTabDialog = function(ev) {
            $mdDialog.show({
                        controller: DialogController,
                        templateUrl: 'tabDialog.tmpl.html',
                        parent: angular.element(document.body),
                        targetEvent: ev,
                        clickOutsideToClose:true
                    })
                    .then(function(answer) {
                        $scope.status = 'You said the information was "' + answer + '".';
                    }, function() {
                        $scope.status = 'You cancelled the dialog.';
                    });
        };

        $scope.showPrerenderedDialog = function(ev) {
            $mdDialog.show({
                controller: DialogController,
                contentElement: '#myDialog',
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose: true
            });
        };

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

            $scope.cancel = function() {
                $mdDialog.cancel();
            };

            $scope.answer = function(answer) {
                $mdDialog.hide(answer);
            };
        }
    });

</script>
</html>

我正在尝试运行 Angular Material 示例对话框，但看到的是空白页

I'm trying to run an Angular Material example dialog, but seeing a blank page

angularjs

angularjs-material

我正在尝试 运行 Angular Material 示例对话框，但看到的是空白页

I'm trying to run an Angular Material example dialog, but seeing a blank page

angularjs

angularjs-material

我正在尝试运行 Angular Material 示例对话框，但看到的是空白页