Angular Material日期选择器为空。

Question

我目前正在使用Angular构建一个Web应用程序，使用Angular Material作为一些UI组件。目前，我有一个无法解决的问题。当我像https://material.angularjs.org/latest/demo/datepicker上所述地使用日期选择器时，窗口会打开但保持空白。 以下是日期选择器的代码片段。

<md-datepicker ng-model="vm.registrationData.birthDate"
                                   md-placeholder="{{'start_register_birth_date' | translate}}"
                                   required></md-datepicker>
                    <div class="error-message"
                         ng-messages="registerForm.birthDate.$error"
                         ng-if="registerForm.birthDate.$touched && registerForm.birthDate.$invalid">
                        <div class="arrow-right"></div>
                        <p ng-message="required">{{'start_register_error_birthDate_required' | translate}}</p>
                    </div>

我的导入是否有问题？

<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/moment/moment.js"></script>
<!-- endbower -->
<script src="js/app.min.js"></script>
<script src="js/config.min.js"></script>

<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<!-- endbower -->
<link rel="stylesheet" type="text/css" href="css/styles.css" />

- TheWieand

---

你能否制作一个可用的代码演示吗？ - shrestha_aj

你有控制台错误吗？ - van

不，没有控制台错误。那是我的第一个希望 :( - TheWieand

Answer 1

使用旧版本的Angular，例如1.5.9。Angular 1.6禁用了控制器的预绑定。

有关更多详细信息，请参见问题＃10168。您可以添加

angular.module('myApp', [])
  .config(function($compileProvider) {
    $compileProvider.preAssignBindingsEnabled(true);
  });

如果您坚持使用Angular 1.6。

- ppham27

---

哇，你刚刚为我节省了几个小时的时间，因为我一直在试图解密一个完全被吞噬的错误。谢谢！ - Augie Gardner

非常感谢，启用这个会有任何风险吗？ - Lexy Feito

@LexyFeito 风险在于启用此功能将允许您编写在构造函数中初始化绑定的控制器。一般来说，您不应该依赖这种行为。一旦禁用此标志，这些控制器将会出现故障。因此，如果您启用此功能，我建议您警惕，确保您没有在构造函数中使用任何绑定。 - ppham27

我对 Angular 不是很熟悉。我应该把这一段代码放在哪里？ - Kevin Cantwell

@NeerajJain：请问您能告诉我们在哪里放置这段代码吗？ - SK.