問題描述:
我使用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
为情所困2017-05-15 17:05:26
試試我這個: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']);
});