Angularjs 角度材质css工具栏

Angularjs 角度材质css工具栏,angularjs,material-design,angular-material,Angularjs,Material Design,Angular Material,问题很简单。如何获得角度材质的工具栏和侧边栏,以便使用ui路由器获得视图。 下面是我的工作代码,我还希望该按钮在较小的显示器上切换侧菜单。如果您能指导我阅读其他文件,我将不胜感激 <!DOCTYPE html> <html lang="en" ng-app="training"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE

问题很简单。如何获得角度材质的工具栏和侧边栏,以便使用ui路由器获得视图。 下面是我的工作代码,我还希望该按钮在较小的显示器上切换侧菜单。如果您能指导我阅读其他文件,我将不胜感激

<!DOCTYPE html>
<html lang="en" ng-app="training">
  <head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>iTraining</title>
<link href="libs/bower_components/angular-material/angular-material.css" rel="stylesheet">
<link href="libs/bower_components/fontawesome/css/font-awesome.min.css" rel="stylesheet">
<link href="libs/bower_components/angular-loading-bar/src/loading-bar.css" type="text/css" rel="stylesheet">

<!--    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300italic,500,700' rel='stylesheet' type='text/css'>-->


  <link href="assets/css/template.css" rel="stylesheet" type="text/css">
    <link href="assets/css/override.css" rel="stylesheet" type="text/css">
  </head>
  <body layout="row" ng-controller="appCtrl">


    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
      <md-toolbar class="md-theme-indigo">
        <h1 class="md-toolbar-tools">
            <a ng-href="/" layout="row" flex>
          <div class="docs-logotype">Material Design</div>
        </a>
          </h1>
      </md-toolbar>
      <md-content class="md-padding" >

        <md-button ng-click="close()" class="md-primary" hide-gt-md>

        </md-button>
        <p hide-md show-gt-md>
          This sidenav is locked open on your device. To go back to the default behavior,
          narrow your display.
        </p>
      </md-content>
    </md-sidenav>
        <div flex>
      <md-content>
    <md-toolbar>
      <h2 class="md-toolbar-tools">
        <span>Toolbar</span>
      </h2>
    </md-toolbar>
      </md-content>
            <md-content>
                <div ui-view></div>
            </md-content>
             </div>




      <script src="libs/bower_components/angular/angular.min.js"></script>
      <script src="libs/bower_components/angular/angular-animate.min.js"></script>
      <script src="libs/bower_components/angular/angular-aria.min.js"></script>
       <script src="libs/bower_components/angular-material/angular-material.min.js"></script>
       <script src="libs/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
      <script src="libs/bower_components/angular-loading-bar/src/loading-bar.js"></script>
      <script src="scripts/app.js"></script>
      <script src="scripts/controller.js"></script>
      <script src="scripts/service.js"></script>
      <script src="scripts/factory.js"></script>
  </body>
</html>
为什么我会收到这个警告

 ARIA: Attribute " aria-label ", required for accessibility, is missing on node: button.md-primary.md-button.md-default-themeaccessKey: ""attributes: NamedNodeMapautofocus: falsebaseURI: "http://localhost/newtraining/"childElementCount: 0childNodes: NodeList[1]children: HTMLCollection[0]classList: DOMTokenList[3]className: "md-primary md-button md-default-theme"clientHeight: 0clientLeft: 0clientTop: 0clientWidth: 0contentEditable: "inherit"dataset: DOMStringMapdir: ""disabled: falsedraggable: falsefirstChild: textfirstElementChild: nullform: nullformAction: ""formEnctype: ""formMethod: ""formNoValidate: falseformTarget: ""hidden: falseid: ""innerHTML: "↵            ↵        "innerText: "↵            ↵        "isContentEditable: falselabels: NodeList[0]lang: ""lastChild: textlastElementChild: nulllocalName: "button"name: ""namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: pnextSibling: textng339: 6nodeName: "BUTTON"nodeType: 1nodeValue: nulloffsetHeight: 0offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 0onabort: nullonautocomplete: nullonautocompleteerror: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonshow: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<button class="md-primary md-button md-default-theme" ng-transclude="" ng-click="close()" hide-gt-md="" tabindex="0">↵            ↵        </button>"outerText: "↵            ↵        "ownerDocument: documentparentElement: md-content.md-padding.md-default-themeparentNode: md-content.md-padding.md-default-themeprefix: nullpreviousElementSibling: nullpreviousSibling: textscrollHeight: 0scrollLeft: 0scrollTop: 0scrollWidth: 0shadowRoot: nullspellcheck: truestyle: CSSStyleDeclarationtabIndex: 0tagName: "BUTTON"textContent: "↵            ↵        "title: ""translate: truetype: "submit"validationMessage: ""validity: ValidityStatevalue: ""webkitdropzone: ""willValidate: true__proto__: HTMLButtonElement
ARIA:button.md-primary.md-button.md-default-themeaccessKey:“属性:NamedNodeMapautofocus:falsebaseURI:”节点上缺少辅助功能所需的属性“ARIA标签”:http://localhost/newtraining/“childElementCount:0子节点:节点列表[1]子节点:HTMLCollection[0]类列表:DOMTokenList[3]类名称:“md主md按钮md默认主题”clientHeight:0clientLeft:0clientTop:0clientWidth:0contentEditable:“继承”数据集:DOMStringMapdir:“禁用:falsedraggable:falsefirstChild:textfirstElementChild:nullform:nullformAction:“formEnctype:”formMethod:“formNoValidate:falseformTarget:”隐藏:falseid:“innerHTML:”↵            ↵        “内部文本:”↵            ↵        isContentEditable:falselabels:NodeList[0]lang:“lastChild:textlastElementChild:nulllocalName:“button”名称:“namespaceURI:”http://www.w3.org/1999/xhtml“nextElementSibling:pnextSibling:textng339:6nodeName:”按钮"节点类型:1nodeValue:NullOffsetLight:0offsetLeft:0offsetParent:nulloffsetTop:0offsetWidth:0OnBort:nullonautocomplete:nullonautocomplete错误:nullonbeforecopy:nullonbeforecut:nullonbeforepaste:nullonblur:NullOnCanCanCanPlaythrough:nullonchange:nullonclick:nullonclose:nulloncontextmenu:nulloncopy:nullonCureChange:nulloncut:nullonBlClick:nullondrag:nullondragend:nullondragenter:nullondragleave:nullondragover:nullondragstart:nullondrop:nullondurationchange:nullonemptied:nullonerror:nullonfocus:nulloninput:nulloninvalid:nullonkeydown:nullonkeypress:nullonloadeddata:nullonloadedmetadata:nullonloadstart:nullonmousedown:NullOnMouseCenter:nullonmouseleave:NullOnMouseMouseMouseMouseOver:nullonmouseup:nullonmousewheel:nullonpaste:nullonpause:nullonplay:nullonplay:nullonprogress:nullonratechange:nullonreset:nullonresize:nullonscroll:nullonsearch:NullOnSeek:nullonselect:nullonselectstart:nullonshow:NullOnInstalled:nullonsubmit:nullonsuspend:nullontimeupdate:nullontoggle:nullonvolumechange:nullonwaiting:NullOnWebKitFullScreen更改:NullOnWebKitFullScreen错误:nullonwheel:nullouterHTML::↵            ↵        "outerText:“↵            ↵        ownerDocument:documentparentElement:md-content.md-padding.md-default-themeparentNode:md-content.md-padding.md-default-themeprefix:NullPreviousElement同级:NullPrevious同级:textscrollHeight:0scrollLeft:0scrollTop:0scrollWidth:0shadowRoot:nullspellcheck:truestyle:CSSSTypeDeclarationTabIndex:0tagName:“按钮”textContent:“↵            ↵        “标题:”“translate:truetype:”“submit”验证消息:”“validity:ValidityState:”“webkitdropzone:”“willValidate:true\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

为此制作一个提琴。关于您的警告,请向您发送“aria标签”,谢谢。无法制作JS提琴。我尝试过并得到了结果。谢谢您伸出手来。
 ARIA: Attribute " aria-label ", required for accessibility, is missing on node: button.md-primary.md-button.md-default-themeaccessKey: ""attributes: NamedNodeMapautofocus: falsebaseURI: "http://localhost/newtraining/"childElementCount: 0childNodes: NodeList[1]children: HTMLCollection[0]classList: DOMTokenList[3]className: "md-primary md-button md-default-theme"clientHeight: 0clientLeft: 0clientTop: 0clientWidth: 0contentEditable: "inherit"dataset: DOMStringMapdir: ""disabled: falsedraggable: falsefirstChild: textfirstElementChild: nullform: nullformAction: ""formEnctype: ""formMethod: ""formNoValidate: falseformTarget: ""hidden: falseid: ""innerHTML: "↵            ↵        "innerText: "↵            ↵        "isContentEditable: falselabels: NodeList[0]lang: ""lastChild: textlastElementChild: nulllocalName: "button"name: ""namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: pnextSibling: textng339: 6nodeName: "BUTTON"nodeType: 1nodeValue: nulloffsetHeight: 0offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 0onabort: nullonautocomplete: nullonautocompleteerror: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonshow: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<button class="md-primary md-button md-default-theme" ng-transclude="" ng-click="close()" hide-gt-md="" tabindex="0">↵            ↵        </button>"outerText: "↵            ↵        "ownerDocument: documentparentElement: md-content.md-padding.md-default-themeparentNode: md-content.md-padding.md-default-themeprefix: nullpreviousElementSibling: nullpreviousSibling: textscrollHeight: 0scrollLeft: 0scrollTop: 0scrollWidth: 0shadowRoot: nullspellcheck: truestyle: CSSStyleDeclarationtabIndex: 0tagName: "BUTTON"textContent: "↵            ↵        "title: ""translate: truetype: "submit"validationMessage: ""validity: ValidityStatevalue: ""webkitdropzone: ""willValidate: true__proto__: HTMLButtonElement