实现一个简单的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. 从Evernote迁移到Wiz

    实在受不了evernote没完没了的弹出广告和让升级账号,我不过就是想安安静静的记个笔记,真不想看您的广告好吧.于是无奈这下,只能选择转换到别的笔记工具阵营. 由于以前一直听说OneNote是仅次于E ...

  2. WinForm 程序加管理员权限

    在Vista 和 Windows 7 及更新版本的操作系统,增加了 UAC(用户账户控制) 的安全机制,如果 UAC 被打开,用户即使以管理员权限登录,其应用程序默认情况下也无法对系统目录.系统注册表 ...

  3. iOS-- 快速集成iOS基于RTMP的视频推流

    效果图 iTools有点卡, 但是推到服务器倒是很快的. 推流 前言 这篇blog是iOS视频直播初窥:<喵播APP>的一个补充. 因为之前传到github上的项目中没有集成视频的推流.有 ...

  4. redis的redis.conf文件详解

    常用的: GENERAL: daemonize  yes  守护进程  port 6379 指定Redis监听端口 requirepass 1  设置认证密码为1 REPLICATION: slave ...

  5. BIM软件小技巧：Revit2014所有快捷键汇总表格

    命令 快捷键 路径 修改 MD 创建>选择;  插入>选择; 注释>选择; 视图>选择; 管理>选择; 修改>选择; 建筑>选择; 结构>选择;  系统 ...

  6. svn做目录访问控制（AuthzSVNAccessFile）

    这个是Apache的配置文件 加载模块和svn的相关设置

  7. tomcat 实例

    现在举一个tomcat应用的例子: 我们现在安装一个jenkins, jenkins的安装方式有两种: 一种是war包的安装方式 另一种是:把下载的安装war包放在tomcat的webapps目录下 ...

  8. 一步一步教你elasticsearch在windows下的安装

    首先下载最新的elasticsearch安装版本:elasticsearch下载.下载最新的elasticsearch 0.90.1版本.下载完成后.解压缩在安装目录.在cmd命令行进入安装目录,再进 ...

  9. git diff命令

    1. 比较两次提交的差异 2. 两个分支之间的比较 3. 暂存区和版本库的比较

  10. mysql-删除日志文件命令详解

    装载 在mysql中会生大量的如mysq-bin.000001这类日志文件了,这些都是二进制文件了,如果我们是普通的日志没有进行主从配置就可以直接使用reset master进行删除了这个方法很简单, ...