实现一个简单的input清空内容，且清空对应ngModel

前台部分

<html ng-app="hpapp">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="css/test.css">

    <script type="text/javascript" src="js/angular.js"></script>

    <script type="text/javascript" src="js/inputempty.js"></script>

    <script type="text/javascript" src="js/info.js"></script>

</head>

<body>

    <div ng-controller="InfoCtrl">

        <input type="text" name="email" ng-model="model.email" inputempty maxvalue="10">

        <br>

        <br>

        <br>

        <input type="text" name="text" ng-model="model.text" inputempty>

        <br>

        <br>

        <br> {{model.email +"*"+ model.text}}

    </div>

</body>

</html>

控制器部分  info.js

 var app = angular.module('hpapp');

 app.controller('InfoCtrl', function($scope) {

     $scope.model = {

         email: '1073520680',

         text: ''

     };

 });

指令部分

var app = angular.module('hpapp', []);

app.directive('inputempty', function() {

    return {

        restrict: 'A',

        require: 'ngModel',

        link: function(scope, elem, attrs, ctrl) {

            var close = '<span class="clear"></span>';

            elem.next().bind('click', function() {

                ctrl.$setViewValue('');

                ctrl.$render();
            });

        }

    };

});
ctrl.$setViewValue('');//清空ngModel

elem.val('');//清空表单

css 部分

.closeW{

    width: 16px;

    height: 16px;

    color: #ccc;

    text-align: center;

    line-height: 16px;

    border: 1px solid #ccc;

    border-radius:16px;

    float: left;

}

.content{

    width: 530px;

    border:1px solid #ccc;

    position: relative;

}

.editW{

    width: 480px;

    min-height: 280px;

    margin:;

    padding: 10px;

    outline: none;

}

.clear{

    clear: both;

}

.empty{

    width: 16px;

    height: 16px;

    color: #ccc;

    text-align: center;

    line-height: 16px;

    border-radius:16px;

    border: 1px solid #ccc;

    margin-left: -20px;

    cursor: pointer;

    display: inline-block;

}

.clear {

    display: inline-block;

    width: 20px;

    height: 20px;

    position: absolute;

    margin-left: -20px;

    cursor: pointer;

    background: url('http://fanyi.baidu.com/static/i18n/zh/widget/translate/main/translateio/clear_9154fd87.png') no-repeat -20px -10px;

}

input{

    padding-right:20px;

    padding-left: 5px;

}

初学angular-简单的angular指令的更多相关文章

  1. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  2. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  3. 使用OAuth保护REST API并使用简单的Angular客户端

    1.概述 在本教程中,我们将使用OAuth保护REST API并从简单的Angular客户端使用它. 我们要构建的应用程序将包含四个独立的模块: 授权服务器 资源服务器 UI implicit - 使 ...

  4. 构建一个简单的Angular工程

    1.创建一个空的工程,之后用webstorm打开,添加一个bower.json文件: { "name": "AngularTpl", "depende ...

  5. Angular使用操作事件指令ng-click传多个参数示例

    本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="m ...

  6. 简单的angular购物车商品小计

    <!DOCTYPE html> <html lang="en" ng-app="shopApp"> <head> <m ...

  7. Angular JS - 5 - Angular JS 模块和控制器

    1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...

  8. Angular 1与 Angular 2之间的一些差别

    现在在用ng1.5.8做一个项目,ng的优点和特性我就不用多说了,ng1在陆续更新到1.5/1.6后就没再推出新版本了,ng2已经面世测试很久了,如同很多系统和框架一样,每个大的版本更新都会有新特性加 ...

  9. Angular 学习笔记 (Angular 9 & ivy)

    refer : https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde47 ...

  10. AngularJs angular.injector、angular.module

    angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...

随机推荐

  1. redis的主从复制配置

    redis的主从复制配置 一.     原理 Redis的主从复制功能非常强大,一个master可以拥有多个slave,而一个slave又可以拥有多个slave,如此下去,形成了强大的多级服务器集群架 ...

  2. C#分割字符串

    命名空间:System.String.Split 程序集:mscorlib( mscorlib.dll) 简单实例: string before = "12,50,30"; str ...

  3. 《HTTP 权威指南》

    第一篇:  Web基础  (HTTP概述. URL.HTTP报文.连接管理) 0. scheme:方案!     协议类型 1.HTTP:超文本传输(状态转移)协议:通信协议方案.     web浏览 ...

  4. 控制器中获取store

    在Controller中要获取View中的选中值我用[javascript] view plaincopyprint?var cmp = Ext.ComponentQuery.query('weldl ...

  5. 手把手windows64位配置安装python2.7

    这几天公司要用到python的一些算法,让我调研一番,之前对Python一次没接触的我在安装配置环境的时候由于版本的问题,折腾了好久,这里简单介绍一下我的安装方法,需要安装pyhton的朋友可以不再向 ...

  6. iOS开发,音效的播放简单实现以及音效播放的简单封装

    一.音效的播放简单实现 二.音效播放的封装 -- 封装思路:将生成的SystemSoundID存放到字典中,每次播放的时候从字典中取出对应的SystemSoundID,没有的话再创建 头文件中定义类方 ...

  7. poj2553 强连通缩点

    The Bottom of a Graph Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 10114   Accepted: ...

  8. Java-URLConnection类详解

    抽象类 URLConnection 是所有类的超类,它代表应用程序和 URL 之间的通信链接.此类的实例可用于读取和写入此 URL 引用的资源.通常,创建一个到 URL 的连接需要几个步骤: open ...

  9. 7 static关键字

    class Person { static int i; static void fun() { System.out.println("我是静态函数"); } } 在静态函数中不 ...

  10. C#微信开发之旅(二)：基础类之HttpClientHelper(更新：SSL安全策略）

    public class HttpClientHelper   2     {   3         /// <summary>   4         /// get请求   5    ...