angular.js - Angularjs+requirejs ngMessages校驗問題
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-15 17:03:26
0
1
622

問題描述:
我使用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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <script data-main="main" src="http://requirejs.org/docs/release/2.1.11/minified/require.js"></script>
  <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-message="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>
</body>
</html>

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

曾经蜡笔没有小新
曾经蜡笔没有小新

全部回覆(1)
为情所困

試試我這個:plunker

<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>

app.js

define(['lodash', 'angular'], function( _, angular) {
  
    angular.module('myApp', ['ngMessages'])
    .controller('TooltipDemoCtrl', function($scope) {

  
    });
});

main

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']);
});
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板