角材料元素加載不正確

我剛剛開始材料設計，我正在使用requireJs將角材料相關性加載到我的應用程序中。我不確定它是否已正確加載，但我能夠獲取我的應用程序的日誌，這意味着requireJs應該沒有任何問題。角材料元素加載不正確

當我啓動主頁時，滑塊和搜索欄等材質角元素加載不正常。

require.config({ 
 
    baseUrl: 'js', 
 
    paths: { 
 
     'angular': '../bower_components/angular/angular.min', 
 
     'ngMaterial': '../bower_components/angular-material/angular-material.min', 
 
     'ngRoute': '../bower_components/angular-route/angular-route.min', 
 
     'jquery': '../bower_components/jquery/dist/jquery.min', 
 
     'bootstrap': '../bower_components/bootstrap/dist/js/bootstrap.min', 
 
     'd3': '../bower_components/d3/d3.min', 
 
     'ngResource': '../bower_components/angular-resource/angular-resource.min', 
 
     'ngAria': '../bower_components/angular-aria/angular-aria.min', 
 
     'ngAnimate': '../bower_components/angular-animate/angular-animate.min', 
 
     'ngSanitize': '../bower_components/angular-sanitize/angular-sanitize.min' 
 
    }, 
 
    shim: { 
 
     'angular': { 
 
      exports: 'angular' 
 
     }, 
 
     'd3':{ 
 
      exports: 'd3' 
 
     }, 
 
     'ngRoute': { 
 
      deps: ['angular'], 
 
      exports: 'ngRoute' 
 
     }, 
 
     'ngResource': { 
 
      deps: ['angular'], 
 
      exports: 'ngResource' 
 
     }, 
 
     'ngAria': { 
 
      deps: ['angular'], 
 
      exports: 'ngAria' 
 
     }, 
 
     'ngAnimate': { 
 
      deps: ['angular'], 
 
      exports: 'ngAnimate' 
 
     }, 
 
     'ngSanitize':{ 
 
      deps: ['angular'], 
 
      exports: 'ngSanitize' 
 
     }, 
 
     'ngMaterial':{ 
 
      deps: ['angular','ngAnimate','ngAria'], 
 
      exports: 'ngMaterial' 
 
     }, 
 
     'jquery':{ 
 
      exports: 'jquery' 
 
     }, 
 
     'bootstrap':{ 
 
      deps: ['jquery'], 
 
      exports: 'bootstrap' 
 
     }, 
 
     'app': { 
 
      deps: ['bootstrap', 'angular', 'ngRoute', 'ngResource','ngMaterial','ngAnimate','ngSanitize'], 
 
      exports: 'app' 
 
     } 
 
    } 
 
}); 
 

 
require(['app'], function() { 
 
    angular.element(document).ready(
 
     function() { 
 
      angular.bootstrap(document, ['MY.App']); 
 
     }); 
 
}); 
 

 
//app.js 
 

 
var dependencies = 
 
    [ 
 
     'angular', 
 
     'ngMaterial', 
 
     'common/module' 
 
    ]; 
 

 
define(dependencies,function(){ 
 
    var appModule = 
 
     angular.module('MY.App', 
 
     [ 
 
      'MY.Modules.Common', 
 
      'ngMaterial', 
 
      'ngAnimate', 
 
      'ngSanitize' 
 
     ]).config(function($mdThemingProvider) { 
 
       $mdThemingProvider.theme('default') 
 
        .primaryPalette('pink') 
 
        .accentPalette('orange'); 
 
      }); 
 

 
    appModule.run(
 
     function ($rootScope, $log) { 
 
      $rootScope.appInitTime = new Date(); 
 

 
      $log.info('Application Initialized Successfully! @ ' + 
 
      $rootScope.appInitTime.toString()); 
 
     } 
 
    ); 
 
});

<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 

 
    <link rel="icon" href="images/favicon.ico"/> 
 
    <link rel="stylesheet" href="bower_components/angular-material/material.min.css"/> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
</head> 
 
<body> 
 
<md-container> 
 
    <md-input-container> 
 
     <label>Email</label> 
 
     <input type="email"> 
 
    </md-input-container> 
 

 
    <!-- Default Slider --> 
 
    <input class="mdl-slider mdl-js-slider" type="range" 
 
      min="0" max="100" value="0" tabindex="0"> 
 
    <!-- Slider with Starting Value --> 
 
    <input class="mdl-slider mdl-js-slider" type="range" 
 
      min="0" max="100" value="25" tabindex="0"> 
 
</md-container> 
 

 
<script src="bower_components/requirejs/require.js" 
 
     data-main="js/main"></script> 
 

 
</body>

，而預期的行爲是這樣的：http://www.getmdl.io/components/index.html#sliders-section

來源

2015-12-09 fireants

檢查控制檯是否有錯誤。 –

我在控制檯上沒有收到任何錯誤，我的應用程序的日誌也很好。 – fireants

檢查網絡選項卡 - 可能是一些樣式表未加載 –

你錯過MDL和Angular.Material - 他們是不同的庫。

如果需要滑塊，你應該使用

<md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class> 
</md-slider>

檢查https://material.angularjs.org/latest/demo/slider

而在片斷＃2將無法工作，因爲沒有bower_components，RequireJS，並安裝所有模塊。

來源

2015-12-10 13:51:00

我認真地錯過了這兩個庫實際上是不同的。將CSS添加到我的index.html後，CSS看起來工作正常。但是我怎樣才能通過requireJs從material.js（來自mdl）導出componentHandler。我做了這樣的事情， ' 路徑：{// .. 'MDL'：」 ../bower_components/material-design-lite/material.min' }，墊片：{ // .. 'mdl'：{'angular'，'ngRoute'，'ngResource'，'ngMaterial'，'ngAnimate'，'ngSanitize'，'mdl'：{componentHandler' }， 'app'：{']， export，'app' }' – fireants

'paths：{// .. 'mdl'：'../bower_components/material-design-lite/material.min' }，shim：{// 'mdl'：{ 出口：'co mponentHandler' }，'app'：{'angular'，'ngRoute'，'ngResource'，'ngMaterial'，'ngAnimate'，'ngSanitize'，'mdl']，導出：'app' } ' – fireants

角材料元素加載不正確

回答

相關問題