угловой JS Navbar не работает - PullRequest
Новая
       1

угловой JS Navbar не работает

0 голосов
/ 03 июля 2018

Я создаю навигационную панель, используя угловые 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>

1 Ответ

0 голосов
/ 07 сентября 2018

Вы пропустили назначение 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...