angular.js - Angularjs+requirejs ngMessages校验问题-PHP中文网问答

问题描述：
我使用requirejs+angularjs+ngMessages参照官方文档写了一个校验的DEMO，但是下图中$error的错误提示正确，但是

You did not enter a field

Your field is too short

Your field is too long

中提三行错误提示文字，却一直显示。

可以帮助我看一下是哪里出现问题了吗？

代码：
main.js:

requirejs.config({
    paths: {
       'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min',
        'app': 'app',
        'lodash': 'https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min',
        'ngMessages': '//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages'
    },  
    shim: {
        'angular': {
          exports: 'angular'
        },
        'ngMessages': ['angular'],
        'app': ['angular']
    }
});
require(['angular','ngMessages',
    'app'
    ], function(angular){
        angular.element(document).ready(function(){
            angular.bootstrap(document, ['myApp']);
        });
 })

index.html






  
  
    

      
        Enter your name:
        
      
      myForm.myName.$error = {{ myForm.myName.$error | json }}
      
        
You did not enter a field
        Your field is too short
        Your field is too long

app.js

define(['require', 'lodash'], function(require, _) {
  var angular = require('angular');
  angular.module('myApp', []).controller('TooltipDemoCtrl', function($scope) {
  })
});

DEMO代码地址：
http://plnkr.co/edit/AWVXcU8CWQTXFqu6pVtL?p=preview

<p ng-controller="TooltipDemoCtrl"> <form name="myForm"> <label> Enter your name: <input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required /> </label> <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre> <p ng-messages="myForm.myName.$error" style="color:maroon"> <p ng-message="required">You did not enter a field</p> <p ng-message="minlength">Your field is too short</p> <p ng-message="maxlength">Your field is too long</p> </p> </form> </p>

requirejs.config({ paths: { 'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min', 'app': './app', 'lodash': 'https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min', 'ngMessages': '//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min' }, shim: { angular: { exports: 'angular' }, ngMessages: ['angular'], app: ['ngMessages'] } }); require(['angular','app'], function(angular, app){ angular.bootstrap(document, ['myApp']); });