Angular Material 无效

Question

我开始使用 Angular Material，但出现了一个问题：我有这个简单的页面，用 Angular Material 构建，带有导航栏，但它没有出现，我也没有知道为什么。这是我的页面：

<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

这段代码中有很多地方你做错了。首先在 body 标签中使用 ng-app at。您还尝试在 div 元素中使用它，因此请将其删除。

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

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

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

Angular Material 无效

Angular Material doesn't work

web

angular-material