Question

嘿所以我目前正在使用Angular创建一个注册表单，我试图通过添加ngMessages来进行放大，以便进行密码确认，电子邮件错误和无效条目等等。

我认为简单的实现会引起巨大的麻烦和许多无用的调试时间。

所以基本上我在主应用程序中包含了ngMessages，就像这样......

的index.html

(function () {
'use strict';

angular
    .module('thinkster',
    ['thinkster.config',
    'thinkster.routes',
    'thinkster.authentication',
    'thinkster.layout',
    'hrlite.profiles', 
    'ngMessages']);

angular
    .module('thinkster.config', []);

angular
    .module('thinkster.routes', ['ngRoute']);

angular
    .module('thinkster')
    .run(run);

run.$inject = ['$http'];

/**
 * @name run
 * @desc Update xsrf $http headers to align with Django's defaults
 */

function run($http) {
    $http.defaults.xsrfHeaderName = 'X-CSRFToken';
    $http.defaults.xsrfCookieName = 'csrftoken';
 }
})();

然后我将angular-messages.js包含到我的javascript.html（我在Django框架上构建）

Javascripts.html

{% load compress %}
{% load staticfiles %}

{% compress js %}
<script type="text/javascript" src="{% static      'bower_components/jquery/dist/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap/dist/js/bootstrap.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/material.js' %}">    </script>
<script type="text/javascript" src="{% static 'bower_components/bootstrap-material-design/dist/js/ripples.js' %}"> </script>
<script type="text/javascript" src="{% static 'bower_components/underscore/underscore.js' %}"></script>

<script type="text/javascript" src="{% static 'bower_components/angular/angular.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/angular-route/angular-route.js' %}"></script>
<script type="text/javascript" src="{% static 'bower_components/angular-cookies/angular-cookies.js' %}"></script>

<script type="text/javascript" src="{% static  'bower_components/ngDialog/js/ngDialog.js' %}"></script>
<script type="text/javascript" src="{% static 'lib/snackbarjs/snackbar.min.js' %}"></script>

<script type="text/javascript" src="{% static 'javascripts/thinkster.js' %}"></script>

<script type="text/javascript" src="{% static 'javascripts/thinkster.routes.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/thinkster.config.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/authentication.module.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/services/authentication.service.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/controllers/register.controller.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/authentication/controllers/login.controller.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/layout/layout.module.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/layout/controllers/navbar.controller.js' %}"></script>

<script type="text/javascript" src="{% static 'javascripts/profiles/profiles.modules.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/profiles/services/profile.service.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/profiles/controllers/profile.controller.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/profiles/controllers/profile-settings.controller.js' %}"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular-messages.js"></script>

{% endcompress %}

然后我刷新服务器，一切仍然工作花花公子..

但是第二次我将ng-messages合并到我的注册表单中，我得到的错误是角度加载了不止一次而且我的控制台冻结了。

Register.html

            <div class="form-group">
              <label for="register__username" class="control-label col-sm-4">Username:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="register__username" data-ng-model="vm.username" required/>
                <div ng-messages="registrationForm.username.$error" ng-messages-include="messages.html"></div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-4" for="register__password">Password:</label>
              <div class="col-sm-8">
                <input type="password" class="form-control" id="register__password" data-ng-model="vm.password" required/>
                <div ng-messages="registrationForm.password.$error" ng-messages-include="messages.html"></div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-4" for="confirm__password">Confirm Password:</label>
              <div class="col-sm-8">
                <input type="password" class="form-control" id="confirm__password" required compare-to="vm.password"/>
                <div ng-messages="registrationForm.confirmPassword.$error" ng-messages-include="messages.html"></div>
              </div>

我对角度很新，所以它可能是我犯过的一个愚蠢的错误，但任何帮助都将不胜感激！谢谢！

ngMessages无法正常工作并导致Angular多次加载错误

0 个答案: