Question

我刚刚开始进行材质设计，我使用requireJs将角度材质依赖项加载到我的应用程序中。我不确定它是否已正确加载但我能够获取我的应用程序的日志，这意味着requireJs可能没有任何问题。

当我启动主页时，滑块和搜索栏等材质角度元素无法正确加载。

 ...
 matched_tweets = []
 if search in tweets.get_text(): 
     match = 1
     matched_tweets.append(tweets) # append all the matches to an array
 ...

 # to print out the results
 for tweet in matched_tweets:
     print(tweet.get_text(), "\n")

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());
        }
    );
});

而预期的行为类似于：http://www.getmdl.io/components/index.html#sliders-section

Answer 1

您错过了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

Stackoverflow中的代码片段无法正常工作，因为没有安装bower_components，RequireJS和所有模块。

角度材料元素未正确加载

1 个答案: