Question

上尝试演示

但我的浏览器显示空白页面。我也检查了控制台，但没有错误也检查所有文件都正确加载。所以这里缺少什么???

    <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="angular-material/angular-material.css">
    <style type="text/css">.navBardemoBasicUsage md-content .ext-content {
  padding: 50px;
  margin: 20px;
  background-color: #FFF2E0; }</style>
</head>
<body>
    <div ng-controller="AppCtrl" ng-cloak>
  <md-content class="md-padding">
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
      <md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
      <md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
      <md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
      <!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
      <md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
      <md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
      -->
    </md-nav-bar>
    <div class="ext-content">
      External content for `<span>{{currentNavItem}}</span>`
    </div>
  </md-content>

    </div>

    <script src="angular/angular.js"></script> 
    <script src="angular-material/angular-material.js"></script> 
    <script src="angular-aria/angular-aria.js"></script> 
    <script src="angular-animate/angular-animate.js"></script> 

    <script>

(function() {
  'use strict';

  angular.module('navBarDemoBasicUsage', ['ngMaterial'])
      .controller('AppCtrl', AppCtrl);

  function AppCtrl($scope) {
    $scope.currentNavItem = 'page1';
  }
})();

    </script> 

</body>
</html>

Answer 1

你在视图中没有声明模块，

<body ng-app="navBarDemoBasicUsage">

角度材料设计演示实施问题

1 个答案: