2016-12-01 151 views
0

我正在使用角质材质v1.1.0并尝试创建简单的工具栏。我已经从角材演示中获取了代码,但是呈现工具栏,而不是获取单个元素。不知道我错过了什么。md-toolbar不使用角度材质渲染材质工具栏

var app = angular.module('app', ['ngMaterial', 'ngRoute']);
<html ng-app="app"> 
 
     <head> 
 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     
 
     <title>My App</title> 
 

 
    \t <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    \t <link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 

 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 
     </head> 
 

 
     <body> 
 
     <md-content> 
 
     \t <md-toolbar> 
 
     \t \t <div class="md-toolbar-tools"> 
 
     \t \t \t <md-button class="md-icon-button" aria-label="menu"> 
 
     \t \t \t \t <md-icon md-font-set="material-icons">menu</md-icon> 
 
     \t \t \t </md-button> 
 
     \t \t \t <h2> 
 
     \t \t \t \t <span>My App</span> 
 
     \t \t \t </h2> 
 
     \t \t \t <span flex></span> 
 
     \t \t \t <md-button class="md-icon-button" aria-label="menu"> 
 
     \t \t \t \t <md-icon md-font-set="material-icons">whatshot</md-icon> 
 
     \t \t \t </md-button> 
 
     \t \t \t <md-button class="md-icon-button" aria-label="menu"> 
 
     \t \t \t \t <md-icon md-font-set="material-icons">share</md-icon> 
 
     \t \t \t </md-button> 
 
     \t \t \t <md-button class="md-icon-button" aria-label="menu"> 
 
     \t \t \t \t <md-icon md-font-set="material-icons">file_download</md-icon> 
 
     \t \t \t </md-button> 
 
     \t \t \t <md-button class="md-icon-button" aria-label="menu"> 
 
     \t \t \t \t <md-icon md-font-set="material-icons">thumb_up</md-icon> 
 
     \t \t \t </md-button> 
 
     \t \t </div> 
 
     \t </md-toolbar> 
 
     </md-content> 
 
     </body> 
 
    </html>

+0

您可以创建在你面对什么样的错误的同时plunker? – Prasad

+0

我创建了一个代码笔http://codepen.io/biznetboost/pen/RoxNaY 检查外观,你会明白 –

+0

你从某个地方采取了例子,它不在你的代码笔中工作吗? – Prasad

回答