각도 재료 탐색 막대가 렌더링되지 않습니다.

각도 재료 디자인을 사용하려고하며 현재 탐색에 대해 작업하고 있습니다. 공식 웹 사이트에서 예제를 시도했지만 navbar가 렌더링되지 않았습니다. 또한 솔루션을 검색하려고했지만 그 중 아무도 도움을받지 못했습니다. 여기 코드입니다 :각도 재료 탐색 막대가 렌더링되지 않습니다.

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

사람이 코드를 잘못 될 수있는 단서가 있습니까?

출처

2016-08-15 mark

가 좋아 보인다이 스크립트 여기

내가 링크가 추가 - 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>

출처

2016-08-15 10:08:32

나는 그것을 시도했으나 rc5 앵귤러 소재 디자인 라이브러리 (js 및 css 파일)를 가져올 수 없다. 나는 또한 rc4를 시도하고 파일을 가져 왔지만 그 결과는 같았다. 문제는 해결되지 않았다. – mark

@mark "rc5 앵귤러 소재 디자인 라이브러리 (js 및 css 파일)를 가져올 수 없습니다"라고 말하면 어떻게됩니까? 콘솔에 오류가 표시됩니까? –

예, 다음과 같은 오류가 나타납니다. 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

출처

2016-10-13 15:52:27 SanjaiVasan

각도 재료 탐색 막대가 렌더링되지 않습니다.

답변

관련 문제