实现一个简单的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. C# 如何捕获键盘按钮和组合键以及KeyPress/KeyDown事件之间的区别 （附KeyChar/KeyCode值）

    1. 首先将窗口属性KeyPreview设为true,如果属性对话框中找不到,就直接在代码里添加: 2. 添加KeyPress / KeyDown事件: 1.KeyPress 和KeyDown .Ke ...

  2. python2.7到python3代码转换脚本2to3的一些介绍

       你的位置: Home ‣ Dive Into Python 3 ‣ 难度等级: ♦♦♦♦♦   使用2to3将代码移植到Python 3 ❝ Life is pleasant. Death is ...

  3. 基本数据类型-列表_元组_字典_day4

    一.列表(list)书写格式:[] #通过list类创建的 li = [1, 12, 9, ", 10, ],"庞麦郎"], "ales", True ...

  4. extJs学习基础2

    一个登陆界面: Ext.onReady(function(){ Ext.define('Login', { //renderTo: Ext.getBody(), extend: 'Ext.window ...

  5. VS2015中GLAUX库的链接问题

    最近学习OpenGL,照着例子写了个程序,用到了GLAUX库. #include <gl\glaux.h> #pragma comment(lib, "glaux") ...

  6. 自定义jstl标签库

    开发环境:Spring+SpringMVC +Maven +Mybatis JSTL 标签库的配置: 导入对应的 jstl.jar 和 standard.jar ,我使用的配置如下: <prop ...

  7. java判断request请求是手机还是pc终端

    /** * 判断请求是否手机端 * @param req * @return */ public static boolean isMobile(HttpServletRequest req) { U ...

  8. C# 后台json转换成时间格式

    1传入json 字符进行转换        public DateTime ConvertTime(string milliTime)        {            long timeTri ...

  9. Java中Comparable和Comparator区别小结

    一.Comparable简介 Comparable是排序接口.若一个类实现了Comparable接口,就意味着该类支持排序.实现了Comparable接口的类的对象的列表或数组可以通过Collecti ...

  10. Thinking in java学习笔记之初始化

    1.基本数据类型:类的每个基本数据类型保证有一个初值(char为0输出则是空白) 2.构造器: 3.静态初始化顺序示例及总结 4.非静态初始化顺序 4.数组