<!DOCTYPE html>

<html lang="zh-CN" ng-app="app">

<head>

    <meta charset="utf-8">

    <title>注册</title>

    <link rel="stylesheet" href="../bootstrap.min.css">

</head>

<body>

    <form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">

        <fieldset>

            <legend>Signup</legend>

            <div class="row">

                <div class="col-xs-12">

                    <label>Your name</label>

                    <input type="email"

                        placeholder="Name"

                        name="name"

                        ng-model="signup.name"

                        ng-minlength="3"

                        ng-maxlength="20"

                        required>

                    <div class="error" ng-messages="signup_form.name.$error" ng-messages-multiple>

                        <small ng-message="minlength">覆盖模板中的提示不能小于3位</small><!--这样可以覆盖模板中的提示-->

                        <div ng-messages-include="templates/errors.html"></div>

                        <!--或者这样写

                            <ng-messages-include src="templates/errors.html"></ng-messages-include>

                        -->

                    </div>

                </div>

            </div>

            <button type="submit" class="btn btn-default">Submit</button>

        </fieldset>

    </form>

    <script src="../angular.min.js"></script>

    <script src="angular-messages.min.js"></script>

    <script>

        angular.module('app', ['ngMessages'])

        .controller('signupController', function($scope) {

        })

    </script>

</body>

</html>

templates中的代码

<small ng-message="required">必填</small>

<small ng-message="email">邮箱不正确</small>

<small ng-message="minlength">不能小于3位</small>

<small ng-message="maxlength">不能大于20位</small>

以上展示的是实例代码

用法

1.<div ng-messages-include="templates/errors.html"></div>

2.<ng-messages-include src="templates/errors.html"></ng-messages-include>

angularjs使用ng-messages-include实例的更多相关文章

  1. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  2. 走进AngularJs(八) ng的路由机制

    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...

  3. 黄聪：AngularJS 动态加载控制器实例-ocLoazLazy

    一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...

  4. AngularJS 表达式中添加过滤器实例

    过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中 历练实例: <!DOCTYPE html><html><head><meta http-equiv ...

  5. AngularJS入门基础——$provide.decorator 实例讲解

    <body ng-controller="OneController"> <script>  var Foobar = function() {      ...

  6. 跟我学AngularJs:AngularJs入门及第一个实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...

  7. AngularJS 学习之路（1）

    AngularJS 是一个 JS 框架,适用于以数据操作为主的 SPA (Single Page Application)应用. 不再是 "先查找元素在操作元素",所有操作都以 & ...

  8. AngularJS进阶学习

    参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...

  9. 详解AngularJS中的依赖注入

    点击查看AngularJS系列目录 依赖注入 一般来说,一个对象只能通过三种方法来得到它的依赖项目: 我们可以在对象内部创建依赖项目 我们可以将依赖作为一个全局变量来进行查找或引用 我们可以将依赖传递 ...

  10. AngularJS的初步学习（1）

    AngularJS 是一个Javascript框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式绑定数据到 HT ...

随机推荐

  1. Android webview 应用

    现在在android把一个网站打包成apk 是很简单的事,不懂一点代码的都可以去百度生成一个apk,app.当然样式就不是你所能控制的. 今天我就介绍一下 android 的 webview 在And ...

  2. JQUERY1.9学习笔记 之基本过滤器(五) 大于选择器

    大于选择器:jQuery( ":gt(index)" )jQuery( ":gt(-index)" ) 例:大于TD5 到TD8 用黄色背景,TD8用红色文字. ...

  3. python 装饰器简介

    24.装饰器     1.@ + 函数名:#1自动执行outer函数并且将下面的函数名f1当做参数传递                   #2将outer函数的返回值,重新赋值给f1. def ou ...

  4. flask开发restful api系列(8)-再谈项目结构

    上一章,我们讲到,怎么用蓝图建造一个好的项目,今天我们继续深入.上一章中,我们所有的接口都写在view.py中,如果几十个,还稍微好管理一点,假如上百个,上千个,怎么找?所有接口堆在一起就显得杂乱无章 ...

  5. Orchard之创建模板

    orchard创建模板的两种基本方式: 第一种:通过候补创建(需要用到候补神器): 第二种:通过Shape Tracing创建:

  6. AudioServicesPlaySystemSound音频服务—备用

    对于简单的.无混音音频,AVAudio ToolBox框架提供了一个简单的C语言风格的音频服务.你可以使用AudioservicesPlaySystemSound函数来播放简单的声音.要遵守以下几个规 ...

  7. Android 安装和启动另外一个应用

    有时候一个应用需要启动另外一个应用来完成操作,比如在某些应用中打开闹钟,相机,日历等等. 启动或安装相应的应用的方法: Step1:判断是否安装目标应用.只要知道目标应用的安装包名就可以通过判断&qu ...

  8. Moving Acerage

    http://zh.wikipedia.org/zh/%E7%A7%BB%E5%8B%95%E5%B9%B3%E5%9D%87

  9. MFC之CToolTipCtrl按钮提示（消息捕获和消息传递）

    记得以前写对话框时,按钮直接有一个tips属性,可以添加默认值,不记得是C#还是啥了,今天忽然想给几个按钮添加提示信息,就捣鼓了一下. 头文件中创建CToolTipCtrl变量,然后在初始化时激活使用 ...

  10. E - Redundant Paths - poj 3177（缩点求叶子节点）

    题意:给一个图,想让每两个点之间都有两条路相连,不过特殊的是相同的两点之间多次相连被认为是一条边,现在求最少还需要添加几条边才能做到 分析:手欠没看清楚是相同的边只能相连一次,需要去重边,缩点后求出来 ...