Question

我正在为我的个人项目使用库角度材料。我正在尝试使用像demo中那样的输入表单。

我想我已经包含了这里所需的所有库：

 ...
 <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css"/>
 <script src="bower_components/angular/angular.js"></script>
 <script src="bower_components/angular-animate/angular-animate.js"></script>
 <script src="bower_components/angular-aria/angular-aria.js"></script>
 <script src="bower_components/angular-messages/angular-messages.js"></script>
 <script src="bower_components/angular-material/angular-material.min.js"></script>
...
</head>
    <body>
       <div ng-app="MyApp" ng-cloak>
           <div ui-view></div>
       </div>
    </body>

这是我的登录页面

<div class="container page page-login">
    <md-content class="form-login">
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2>
                    <span>Login</span>
                </h2>
            </div>
        </md-toolbar>
        <br>
        <div layout="column">
            <form ng-submit="logIn()" class="md-inline-form">
                <div flex>
                    <md-input-container class="md-block">
                        <label>Username or email</label>
                        <input ng-model="user.username">
                    </md-input-container>
                </div>
                <div flex>
                    <md-input-container class="md-block">
                        <label>Password</label>
                        <input ng-model="user.password" type="password">
                    </md-input-container>
                </div>
                <div flex layout="row">
                    <md-checkbox class="remember-me md-primary" name="remember" aria-label="Remember me">
                        Remember me
                    </md-checkbox>
                    <span flex></span>
                    <md-button type="submit" class="md-raised md-primary">Login</md-button>
                    <md-button ng-href="/login/google" class="md-raised md-warn fixed-btn-link">Google+</md-button>
                </div>
            </form>
        </div>
    </md-content>

    <md-content class="form-signup">
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2>
                    <span>Do not have an account yet? Signup now!</span>
                </h2>
            </div>
        </md-toolbar>
        <br>
        <div layout="column">
            <form ng-submit="signup()" class="md-inline-form">
                <div flex>
                    <md-input-container class="md-block">
                        <label>Email*</label>
                        <input ng-model="new_user.username" required type="text">
                    </md-input-container>
                </div>
                <div flex>
                    <md-input-container class="md-block">
                        <label>Firstname</label>
                        <input ng-model="new_user.firstname" type="text">
                    </md-input-container>
                </div>
                <div flex>
                    <md-input-container class="md-block">
                        <label>Lastname</label>
                        <input ng-model="new_user.lastname" type="text">
                    </md-input-container>
                </div>
                <div flex>
                    <md-input-container class="md-block">
                        <label>Password*</label>
                        <input ng-model="new_user.password" ng-change="show_repeat_password_error = checkRepeatEmail()" required type="password">
                    </md-input-container>
                </div>
                <div flex>
                    <md-input-container class="md-block">
                        <label>Repeat password*</label>
                        <input ng-model="new_user.repeat_password" ng-change="show_repeat_password_error = checkRepeatEmail()" required type="password">
                        <md-caption ng-show="show_repeat_password_error">Passwords must match!</md-caption>
                    </md-input-container>
                </div>
                <div flex layout="row" layout-align="center" >
                    <md-button type="submit" class="md-raised md-primary">Signup</md-button>
                </div>
            </form>
        </div>
    </md-content>
</div>

当我第一次访问该页面时，这似乎就是结果角度材料适用于按钮，复选框和其余部分但它没有输入：

然而，当我重新加载页面时，它正常工作：

我在其他页面也有这个问题。怎么了？谢谢你的回答。

Angular-Material无法正确加载输入

0 个答案: