2016-08-15 21 views
0

角度素材設計を使用しようとしており、現在はナビゲーションを行っています。私は公式のウェブサイトで例を試したが、navbarはレンダリングしていなかった。私も解決策を探そうとしましたが、そのうちのどれも助けられませんでした。ここ はコードです:角材nav-barがレンダリングされていません

<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> 

誰もがこのコードで間違っている可能性がどのような手掛かりを持っていますか?

+0

は大丈夫らしいこのスクリプトここ

私はリンクを持っているを追加 - http://codepen.io/camden-kid/pen/VjgEmw?editors=1010#0 。コンソールにエラーがありますか? –

+0

@camden_kidコンソールにエラーはありません。また、通常のWebページ(HTMLファイルにコードを入れてブラウザで試してみる)として試してみましたか? – mark

答えて

0

あなたがロードしているAngular Materialファイルはなんらかの理由で動作しないようです。それらを更新すると機能します。

<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> 
+0

私はそれを試しましたが、rc5角度材料設計のlibs(jsとcssファイル)を取り出すことはできません。私もrc4を試してみましたが、ファイルをフェッチしましたが、結果は同じでした。問題は解決しませんでした。 – mark

+0

@mark「rc5 angle material design libs(jsとcssファイル)を取得できません」と言ったら、どういう意味ですか?コンソールにエラーが表示されますか? –

+0

はい、この種のエラーが表示されます:GET http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc5/angular-material.min.js 404(見つからない) – mark

関連する問題