Angular中的材质设计不起作用

Question

I have a problem with Angular Material including. 我对Angular Material有疑问，包括。 I've installed angular-material with bower in my angular project and included scripts and stylesheet. 我已经在我的角度项目中安装了带有弓形物的角度材料，并包含了脚本和样式表。 Angular is v1.4.1 and Angular Material 0.10.0. 角度为v1.4.1，角度材料为0.10.0。 Is there any wrong dependency? 是否有任何错误的依赖关系？

 var app = angular.module('startApp', ['ngMaterial' ]); app.controller('MainController', ['$scope', function($scope) { $scope.title = 'Web page'; $scope.array = [{ name: 'data 1', duration: '01:42', creationdate: new Date('2014', '03', '08') }, { name: 'data 2', duration: '00:58', creationdate: new Date('2014', '03', '08') }, { name: 'data 3', duration: '02:45', creationdate: new Date('2014', '03', '08') }]; }]);

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <title>web page</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="stylesheet" href="bower_components/angular-material/angular-material.css"> <!-- build:css(.) styles/vendor.css --> <!-- bower:css --> <!-- endbower --> <!-- endbuild --> <!-- build:css(.tmp) styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild --> </head> <body ng-app="startApp"> <md-button>asd</md-button> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Main Content --> <div class="main" ng-controller="MainController"> <div class="container"> <h1> {{title}} </h1> <div ng-repeat="data in array" class="col-md-6"> <p class="title">{{data.name}}</p> <p class="title">{{data.duration}}</p> <p class="title">{{data.creationdate | date}}</p> </div> </div> </div><!-- end Main Content --> <!-- Include Angular Material --> <script src="bower_components/angular-material/angular-material.js"></script> <!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-cookies/angular-cookies.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="bower_components/angular-touch/angular-touch.js"></script> <script src="bower_components/angular-aria/angular-aria.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp,app}) scripts/scripts.js --> <!-- Controllers --> <script src="scripts/controllers/main.js"></script> <script src="scripts/controllers/about.js"></script> <!-- Modules --> <script src="scripts/app.js"></script> <!-- endbuild --> </body> </html>

Answer 1

Clean up your javascript libraries, the order is important! 清理您的javascript库，顺序很重要！

jQuery.js jQuery.js
angular.js angular.js
all angular sub modules 所有角形子模块
your application scripts 您的应用程序脚本

 var app = angular.module('startApp', ['ngMaterial' ]); app.controller('MainController', ['$scope', function($scope) { $scope.title = 'Web page'; $scope.array = [{ name: 'data 1', duration: '01:42', creationdate: new Date('2014', '03', '08') }, { name: 'data 2', duration: '00:58', creationdate: new Date('2014', '03', '08') }, { name: 'data 3', duration: '02:45', creationdate: new Date('2014', '03', '08') }]; }]);

 <!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <title>web page</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"> </head> <body ng-app="startApp"> <md-button>asd</md-button> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Main Content --> <div class="main" ng-controller="MainController"> <div class="container"> <h1> {{title}} </h1> <div ng-repeat="data in array" class="col-md-6"> <p class="title">{{data.name}}</p> <p class="title">{{data.duration}}</p> <p class="title">{{data.creationdate | date}}</p> </div> </div> </div><!-- end Main Content --> <!-- Include Angular Material --> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="https://code.angularjs.org/1.4.1/angular.js"></script> <script src="https://code.angularjs.org/1.4.1/angular-animate.js"></script> <script src="https://code.angularjs.org/1.4.1/angular-aria.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script> <!-- build:js(.) scripts/vendor.js --> <!-- endbuild --> </body> </html>

Angular中的材质设计不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-06-19 09:06:36

Angular中的材质设计不起作用

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-06-19 09:06:36

解决方案1
2 已采纳 2015-06-19 09:06:36