Question

我正在使用angular js创建导航栏，但无法正常工作。甚至CSS都不起作用。无法找到为什么它不起作用。我必须从此链接获取navbar的代码。

您好，我正在使用angular js创建一个导航栏，但无法正常工作。甚至CSS都不起作用。无法找到为什么它不起作用。我必须从此链接获取navbar的代码。

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>

Answer 1

您错过了分配ng-app（在您的情况下为ng-app="navBarDemoBasicUsage"），并且还错过了导入一些JS和CSS库的过程。

导入Material 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>

角度js导航栏不起作用

1 个答案: