AngularJs 输入和日期选择器 css 不起作用答案

【问题标题】：AngularJs input and datepicker css is not workingAngularJs 输入和日期选择器 css 不起作用
【发布时间】：2017-03-17 15:00:59
【问题描述】：

我正在创建一个平板电脑应用程序，我需要像 AngularJS Demos (https://material.angularjs.org/latest/demo/input) 一样放置 DatePicker，但它不起作用，请参见图片：

我把 Angular Material 的 css：

<link href="resource/css/angular-material.min.css" rel="stylesheet">

还有其他问题，布局指令不起作用，我认为是同样的问题。

谢谢阿尔盖特

【问题讨论】：

标签： javascript css angularjs angularjs-directive datepicker

【解决方案1】：

我附上了 Angular 日期选择器 here 的工作版本的链接。

该应用包含以下依赖项：['ngMaterial', 'ngMessages', 'material.svgAssetsCache']

这些是您必须在外部使用 CDN 加载或在内部使用 bower、node 等加载的依赖项。

 <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

这是您要包含日期选择器的 HTML 代码：

<div ng-controller="AppCtrl" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">
    <md-content layout-padding="">

        <div layout-gt-xs="row">
            <div flex-gt-xs="">
                <h4>Standard date-picker</h4>
                <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
            </div>
    </md-content>
</div>

确保您已按照正确的顺序在您的应用程序中加载依赖项，例如：['ngMaterial', 'ngMessages', 'material.svgAssetsCache'] 以及您的 development.js 或 production.js 文件，具体取决于您在哪个环境中工作。

以下是包含个性化 CSS 主题的方法：（如果您不将主题作为应用程序的配置包含在内，那么您对主题的 HTML 引用将不起作用）

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {

  $mdThemingProvider.theme('default')
    .primaryPalette('pink', {
      'default': '400', // by default use shade 400 from the pink palette for primary intentions
      'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
      'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
      'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
    })
    // If you specify less than all of the keys, it will inherit from the
    // default shades
    .accentPalette('purple', {
      'default': '200' // use shade 200 for default, and keep all other shades the same
    });

});

【讨论】：

【解决方案2】：

可能有很多东西，这是一个有效的布局：

<md-content flex layout-padding>
  <div layout="row" layout-align=" start center">
    <md-datepicker ng-model="App" md-placeholder="date" flex></md-datepicker>
  </div>
</md-content>

例子：

Angular Material App Layout

您可能想用上面的笔或叉子来尝试重现您的问题。

【讨论】：