2016-12-01 129 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

回答