<!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. combobox只读代码

    public partial class Form1: Form { // combobox只读代码 [DllImport("user32.dll", CharSet = Char ...

  2. 转载：CURL常用命令

    转载网址:http://www.cnblogs.com/gbyukg/p/3326825.html 下载单个文件,默认将输出打印到标准输出中(STDOUT)中 curl http://www.cent ...

  3. centos 开启apache rewrite模式

    mod_rewrite能使网页伪静态,对于搜索引擎友好,下面就是开启这个功能的说明!启用mod_rewrite模块在conf目录的httpd.conf文件中找到 LoadModule rewrite_ ...

  4. 获取SQL段的执行时间

    对SQL进行优化 经常会需要知道这条SQL语句执行的时间,这里介绍我的一种常用做法 DECLARE @d DATETIME SET @d=GETDATE() --do something --for ...

  5. SDL音频播放

    gcc -o tutorial03 tutorial03.c -lavutil -lavformat -lavcodec -lz -lm \`sdl-config --cflags --libs` A ...

  6. google官方提供的下拉刷新控件SwipeRefreshLayout

    摘自:http://www.stormzhang.com/android/2014/03/29/android-swiperefreshlayout/ SwipeRefreshLayout Swipe ...

  7. Android添加标题进度条

    requestWindowFeaure(Window.FEATURE_PROGRESS); setProgressBarVisibility(true); 这两步必须在setContentView() ...

  8. HDU_2030——统计文本中汉字的个数

    Problem Description 统计给定文本文件中汉字的个数.   Input 输入文件首先包含一个整数n,表示测试实例的个数,然后是n段文本.   Output 对于每一段文本,输出其中的汉 ...

  9. Java多线程中变量的可见性

    之所以写这篇博客, 是因为在csdn上看到一个帖子问的就是这个问题. 废话不多说, 我们先看看他的代码(为了减少代码量, 我将创建线程并启动的部分修改为使用方法引用). 1 2 3 4 5 6 7 8 ...

  10. [原创]Python入门到简单网站目录扫描器编写(上)

    1.字符串,整型,浮点型.区别以及用法 |------字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. 可以不严格的说,你可以认为引号包括的,都属于字符串 ...