angularjs - 角度js导航栏不起作用
问题描述
我正在使用 Angular js 创建一个导航栏,但它无法正常工作。甚至 css 都不起作用。无法找到它为什么不起作用。我必须从此链接获取导航栏的代码。
您好,我正在使用 Angular js 创建一个导航栏,但它无法正常工作。甚至 css 都不起作用。无法找到它为什么不起作用。我必须从此链接获取导航栏的代码。
https://material.angularjs.org/1.1.5/demo/navBar
这是我的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<style type="text/css">
.navBardemoBasicUsage md-content .ext-content {
padding: 50px;
margin: 20px;
background-color: #FFF2E0; }
</style>
</head>
<body>
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-nav-bar
md-no-ink-bar="disableInkBar"
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>
<!-- these require actual routing with ui-router or ng-route, so they
won't work in the demo
<md-nav-item md-nav-href="#page4" name="page5">Page Four</md-nav-item>
<md-nav-item md-nav-sref="app.page5" name="page4">Page Five</md-nav-item>
You can also add options for the <code>ui-sref-opts</code> attribute.
<md-nav-item md-nav-sref="page6" sref-opts="{reload:true, notify:true}">
Page Six
</md-nav-item>
-->
</md-nav-bar>
<div class="ext-content">
External content for `<span>{{currentNavItem}}</span>`.
</div>
<md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>
</md-content>
</div>
<script type="text/javascript">
(function() {
'use strict';
angular.module('navBarDemoBasicUsage', ['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
$scope.goto = function(page) {
console.log("Goto " + page);
}
}
})();
</script>
</body>
</html>
解决方案
您错过了分配ng-app
(在您的情况下将是ng-app="navBarDemoBasicUsage"
),并且您还错过了导入一些 JS 和 CSS 库。
导入材质 CSS 库:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.min.css">
导入Angular JS库(我用过版本1.6.9
,你可以用1.7.2
):
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
完整代码(根据您的修改):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.min.css">
<title></title>
<style type="text/css">
.navBardemoBasicUsage md-content .ext-content {
padding: 50px;
margin: 20px;
background-color: #FFF2E0;
}
</style>
</head>
<body ng-app="navBarDemoBasicUsage">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-nav-bar md-no-ink-bar="disableInkBar" 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>
<!-- these require actual routing with ui-router or ng-route, so they
won't work in the demo
<md-nav-item md-nav-href="#page4" name="page5">Page Four</md-nav-item>
<md-nav-item md-nav-sref="app.page5" name="page4">Page Five</md-nav-item>
You can also add options for the <code>ui-sref-opts</code> attribute.
<md-nav-item md-nav-sref="page6" sref-opts="{reload:true, notify:true}">
Page Six
</md-nav-item>
-->
</md-nav-bar>
<div class="ext-content">
External content for `<span>{{currentNavItem}}</span>`.
</div>
<md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>
</md-content>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('navBarDemoBasicUsage', ['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
$scope.goto = function (page) {
console.log("Goto " + page);
}
}
</script>
</body>
</html>
推荐阅读
- php - 如何使用 php 保存图像源变量
- java - Flux 在任何 java.lang.Error(OOM) 的情况下卡住
- spring-data-mongodb - Spring Data 索引自动创建
- excel - 我的同事的运行时 1004 错误,但不是我的
- tensorflow - 为什么加载具有 LSTM 初始状态的 TF Keras 模型不起作用?
- git - 如何在 GitHub 中显示被视为“二进制”的文件的差异?
- python - 所有订单均未显示
- swift - SwiftUI WindowGroup:如何限制窗口数量?
- javascript - 未注册的 HTML 自定义元素和已注册的 HTML 自定义元素有什么区别?
- mysql - 如何使用内连接优化查询