<!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. django 学习 --- 环境搭建

    1 安装django a: pip安装 pip install Django==版本号 b:源码安装 https://www.djangoproject.com/download/ tar -xvzf ...

  2. Matlab与外部接口：MAT文件基础

    MAT 文件MAT文件是MATLAB使用的一种特有的二进制数据文件.MAT文件可以包含一个或者多个MATLAB 变量.MATLAB通常采用MAT文件把工作空间的变量存储在磁盘里,在MAT文件中不仅保存 ...

  3. SVM详解

    SVM入门(一)至(三)Refresh 按:之前的文章重新汇编一下,修改了一些错误和不当的说法,一起复习,然后继续SVM之旅. (一)SVM的简介 支持向量机(Support Vector Machi ...

  4. Retina 显示屏

    Retina 直接翻译是视网膜的意思.在IT上,是Apple 公司提出的.意思是指一个显示屏的颗粒度 px 密度高到人类无法看见.要了解细节必须先了解基础知识inch 英寸 1 inch = 2.52 ...

  5. 什么时候使用NO_UNNEST

    select * from test a where object_id in (select department_id from hr.dept_1 dept where department_i ...

  6. [Tips]ASP.NET MVC 发布到服务器后Model中属性相关的Attribute失效

    Asp.net MVC4 开发的项目,发布到真实环境环境后Model中的一个属性设置的了Attribute,但是这些Attribute都失效. 经过对比和坚持代码发现控制长度的Attribute使用错 ...

  7. 将vs2012建的项目转换为vs2010项目

    vs2012建的项目vs2010打不开,但vs2010的项目vs2012能打开,所以我觉得vs2012没有对解决方案进行重大的调整,尝试修改了一下.sln文件,使用vs2010就能打开了,方法如下: ...

  8. JS浏览器对象-window对象

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  9. github atom创建自己的语法高亮

    使用atom一段时间了,有些插件还不是很成熟.比如项目中使用protobuf,早就有人写了语法高亮(https://github.com/podgib/atom-protobuf),但是效果不是很好. ...

  10. (转)在SAE使用Apple Push Notification Service服务开发iOS应用, 实现消息推送

    在SAE使用Apple Push Notification Service服务开发iOS应用, 实现消息推送 From: http://saeapns.sinaapp.com/doc.html 1,在 ...