Question

我开始使用Angular Material并且出现问题：我有这个简单的页面，使用Angular Material构建，带有NavBar，但它没有出现，我不知道为什么。这是我的页面：

<html lang="it">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Angular Material style sheet -->
    <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>
    <!-- NavBar -->
    <div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage" ng-app="MyApp">
        <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>
    <!-- End NavBar -->


    <!-- Angular Material requires Angular.js Libraries -->
    <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>

    <!-- Angular Material Library -->
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

    <!-- Your application bootstrap  -->
    <script type="text/javascript">    
        (function() {
            'use strict';

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

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

        angular.module('MyApp', ['ngMaterial']);
    </script>
</body>

结果是一个空白页面。谢谢你的帮助！

Answer 1

这段代码中你做错了很多。首先仅在ng-app代码中使用body。您还尝试在div元素中使用它，因此请删除它。

您在javascript中定义了MyApp两次，因此请删除最后一个定义。

删除material.svgAssetsCache导入，因为它不可用。并尝试在角度javascript文件中使用以下代码。

angular.module('MyApp',['ngMaterial', 'ngMessages'])
            .controller('AppCtrl', function($scope) {
            $scope.currentNavItem = 'page1';
});

角度材料不起作用

1 个答案: