angular.js - Angularjs+requirejs ngMessages校驗(yàn)問(wèn)題
問(wèn)題描述
問(wèn)題描述：我使用requirejs+angularjs+ngMessages參照官方文檔寫(xiě)了一個(gè)校驗(yàn)的DEMO，但是下圖中$error的錯(cuò)誤提示正確，但是<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> 中提三行錯(cuò)誤提示文字，卻一直顯示。
可以幫助我看一下是哪里出現(xiàn)問(wèn)題了嗎？
代碼：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
問(wèn)題解答
回答1：試試我這個(gè)：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’]);});
相關(guān)文章：
1. python - 啟動(dòng)Eric6時(shí)報(bào)錯(cuò)：’qscintilla_zh_CN’ could not be loaded2. android下css3動(dòng)畫(huà)非常卡，GPU也不差啊3. MySQL中的enum類(lèi)型有什么優(yōu)點(diǎn)？4. css3 - 純css實(shí)現(xiàn)點(diǎn)擊特效5. mysql - 記得以前在哪里看過(guò)一個(gè)估算時(shí)間的網(wǎng)站6. css3 - 我想要背景長(zhǎng)度變化，而文字不移動(dòng)，要怎么修改呢7. javascript - 關(guān)于<a>元素與<input>元素的JS事件運(yùn)行問(wèn)題8. javascript - vue 怎么渲染自定義組件9. javascript - 同步方式寫(xiě)異步到底指什么？10. python - 有什么好的可以收集貨幣基金的資源?
網(wǎng)公網(wǎng)安備