угловой материал и пользовательский интерфейс роутера - не работает

Question

угловой материал и пользовательский интерфейс роутера - не работает

0

Я использую угловой материал и ui-router в своем проекте. Я пытаюсь использовать одну панель инструментов, sidenav и нижний колонтитул для всех страниц. Это означает, что каждый вид, вставленный в viewname: menucontent menu.html, будет иметь панель инструментов и sidenav и нижний колонтитул.

Я прервал исходный код. Все представления находятся внутри папки, названной в качестве шаблонов. Функция входа прекрасно работает, так как для этого представления не требуется панель инструментов, сиденья и нижний колонтитул. Пагелистический вид также отображается, когда я не использую представление меню в качестве родительского представления.

Проблема заключается в
1. Я вижу перепутанную панель инструментов и нижний колонтитул. Я думаю, что я использую неправильные директивы о угловых материалах.
2. md-content или ui-view (основная область содержимого пуста).

Я попытался сделать код, но его не работает http://codepen.io/brunocoder/pen/YWOGvV Вот скриншот страниц перепутанной страницы и желаемого вида страницы

вот мой код HTML

<html lang="en" >
<head>
  <title>Angular Material</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
  <link rel="stylesheet" href="../node_modules/angular-material/angular-material.css"/>
  <style type="text/css">
  [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
  }
  </style>
</head>
<body layout="row" flex ng-app="myApp">
  <div class="fill-height">
      <div ui-view layout="column" flex >
        <md-content>
        </md-content>
      </div>
  </div>


  <script type="text/ng-template" id="menu.html">
    <md-sidenav md-component-id="left" md-is-open="isSidenavOpen" class="md-sidenav-left">
      <md-toolbar class="md-hue-2">
        Left Nav!
      </md-toolbar>
    </md-sidenav>
    <md-sidenav md-component-id="right"  class="md-sidenav-right">
      <md-toolbar class="md-hue-2">
        Right Nav!
      </md-toolbar>
    </md-sidenav>

    <md-toolbar class="md-hue-2" ng-controller="MenuController">
      <div class="md-toolbar-tools">
        <md-button class="md-icon-button" aria-label="Settings"  ng-click="openLeftMenu()">
          <i class="material-icons">menu</i>
        </md-button>
        <h2 layout="row" layout-align="center center">
          <p>Pagelist</p>
        </h2>
        <span flex></span>
        <md-button class="md-icon-button" aria-label="More"  ng-click="openRightMenu()" >
          <i class="material-icons">more_vert</i>
        </md-button>
      </div>
    </md-toolbar>

    <footer>
      <md-toolbar class="md-scroll-shrink">
        <div layout="row" layout-align="center center" flex>
          FOOTER INFO
        </div>
      </md-toolbar>
    </footer>
  </script>

    <script type="text/ng-template" id="page-list.html">
  <div ng-controller="HomepageController" layout="column" flex>
  <md-content layout="column" flex >
      <main flex>
        <md-list ng-repeat="page in pagelists">
          <md-list-item class="md-2-line" ui-sref="#/app/{{page.url}}">
            <i class="material-icons">{{page.icon}}</i>
            <div class="md-list-item-text">
              <p>{{page.title}}</p>
            </div>
          </md-list-item>
          <md-divider></md-divider>
        </md-list>
      </main>
    </md-content>
   </div>
  </script>
  <!-- Angular Material Dependencies -->

  <script src="../node_modules/angular/angular.js"></script>
  <script src="../node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
  <script src="../node_modules/angular-animate/angular-animate.js"></script>
  <script src="../node_modules/angular-aria/angular-aria.js"></script>
  <script type="text/javascript" src="../node_modules/angular-material/angular-material.js"></script>
  <script src="//cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

</body>
</html>

JS

(function(angular, undefined) {
'use strict';
  var app = angular.module('myApp', ['ngMaterial', 'ngMdIcons', 'ui.router']);
  app.config(function($mdThemingProvider, $stateProvider, $urlRouterProvider) {
//states starts here
    $stateProvider

    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/menu.html',
      controller: 'MenuController'
    })

      .state('app.page-list', {
        url: "/page-list",
        views: {
          'menuContent' :{
            templateUrl: "templates/page-list.html",
            controller: 'HomepageController'
          }
        }
      })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');

  });

  app.controller('MenuController', function($scope, $mdSidenav) {
    $scope.isSidenavOpen = false;

    $scope.openLeftMenu = function() {
      $mdSidenav('left').toggle();
    };
    $scope.openRightMenu = function() {
      $mdSidenav('right').toggle();
    };
    $scope.$watch('isSidenavOpen', function(isSidenavOpen) {

    });
  });

  app.controller('HomepageController',[ '$scope', '$state' , function($scope, $state, $stateParams) {
    $scope.pagelists =[
          { title: 'List item 1', id: 1, url: 'page1', },
          { title: 'List item 2', id: 2, url: 'page2', },
          { title: 'List item 3', id: 3, url: 'page3', }
      ];
  }]);

})(angular);

CSS

  .fill-height{
    display: flex;
    flex: 1;
    min-height: 100%;
  }

  .fill-height > div{
    min-height: 100%;
    display: flex;
  }

спасибо

brunocoder 02 авг. 2016, в 09:57

Источник

Теги:

angularjs

angular-material

angular-ui-router

material-design

url-routing

1 ответ

Ещё вопросы

Syam Pillai · Answer 1 · 2016-08-02T07-04-00.000Z

href будет работать только для тега <a>. Поскольку вы используете угловой ui-router, вы можете использовать sref вместо href.

изменить html- код на

<md-list-item class="md-2-line">
  <a ui-sref="app.page-list(page.url)">
    <i class="material-icons">{{page.icon}}</i>
    <div class="md-list-item-text">
      <p>{{page.title}}</p>
    </div>
 </a>

И измените функцию маршрутизации app.page-list в

.state('app.page-list', {
    url: "/page-list/:page",
    views: {
      'menuContent' :{
        templateUrl: "templates/page-list.html",
        controller: 'HomepageController'
      }
    }
  })

спасибо за улов. Я починю это. но проблема не в href. Проблема в том, что <ui-view> не получает код, написанный на page-list.html.