角度材质导航栏未渲染答案

【问题标题】：Angular material nav-bar is not rendering角度材质导航栏未渲染
【发布时间】：2016-08-15 08:37:36
【问题描述】：

我正在尝试使用角度材料设计，目前正在研究导航。我尝试了官方网站上的示例，但导航栏没有呈现。我也试图寻找解决方案，但他们都没有帮助。这是代码：

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

有人知道这段代码有什么问题吗？

【问题讨论】：

看起来不错 - codepen.io/camden-kid/pen/VjgEmw?editors=1010#0。控制台有错误吗？
@camden_kid 控制台中没有错误。你是不是也像普通网页一样尝试（将代码放入html文件并在浏览器中尝试）？

标签： javascript angularjs web material-design angular-material

【解决方案1】：

您正在加载的 Angular 材质文件似乎由于某种原因无法正常工作。更新它们确实有效。

<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 当您说“它无法获取 rc5 Angular Material Design 库（js 和 css 文件）”时，您是什么意思？您是否在控制台中看到错误？
是的，我看到这种错误：GET ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc5/… 404 (Not Found)

【解决方案2】：

<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

【讨论】：