角材料导航栏不呈现

问题描述：

我正在尝试使用角材料设计，目前正在进行导航。我试图在官方网站上的例子，但导航栏不呈现。我也试图寻找解决方案，但没有帮助。下面是代码：角材料导航栏不呈现

<html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
</head> 
<body ng-app="MyApp" ng-cloak>  
    <div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage"> 
     <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> 
      </md-nav-bar> 
     <span>{{currentNavItem}}</span> 
     </md-content> 
    </div> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 

    <script type="text/javascript">  
     (function() { 
      'use strict'; 

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

      function AppCtrl($scope) { 
       $scope.currentNavItem = 'page1'; 
      } 
     })(); 
    </script> 
</body> 
</html>

有没有人有什么线索可以是错误的代码？

看起来没问题 - http://codepen.io/camden-kid/pen/VjgEmw?editors=1010#0 。控制台中是否有错误？ –

@camden_kid控制台中没有错误。你是否也试过它作为正常的网页（将代码放入HTML文件并在浏览器中试用）？ – mark

答

看来您正在加载的角度材料文件由于某种原因而不起作用。更新它们确实有效。

<html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc5/angular-material.min.css"> 
</head> 
<body ng-app="MyApp" ng-cloak>  
    <div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage"> 
     <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> 
      </md-nav-bar> 
     <span>{{currentNavItem}}</span> 
     </md-content> 
    </div> 

    <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="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc5/angular-material.min.js"></script> 

    <script type="text/javascript">  
     (function() { 
      'use strict'; 

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

      function AppCtrl($scope) { 
       $scope.currentNavItem = 'page1'; 
      } 
     })(); 
    </script> 
</body> 
</html>

我试过了，但它无法获取rc5角材料设计库（js和css文件）。我也尝试过rc4，它提取了文件，但结果是一样的 - 问题没有解决。 – mark

@mark当你说“它不能获取rc5角材料设计库（js和css文件）”时，你是什么意思？你看到控制台中的错误吗？ –

是的，我看到这种错误：GET http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc5/angular-material.min.js 404（未找到） – mark

答

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>

添加这个脚本

在这里，我有一个链接http://codepen.io/team/MHENewTech/pres/LZpzwX

角材料导航栏不呈现

相关推荐