Angularjs自定义指令Directive详解


Posted in Javascript onMay 27, 2017

今天学习angularjs自定义指令Directive。

Directive是一个非常棒的功能。可以实现我们自义的的功能方法。

下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin"。

在网页上放一个文本框和一个铵钮:

Angularjs自定义指令Directive详解

<form id="form1" name="form1" ng-app="app" ng-controller="ctrl" novalidate>
  <input id="Text1" type="text" ng-model="Account" is-Administrator/>
  <br />
  <input id="ButtonVerify" type="button" value="Verify" ng-click="Verify();" />
 </form>

然后你需要引用angularjs的类库:

@Scripts.Render("~/bundles/angular")

以上是ASP.NET MVC bundle了。

定义一个App:

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

定义一个控制器:

Angularjs自定义指令Directive详解

app.controller('ctrl', function ($scope) {
   $scope.Account;
   $scope.Verify = function () {
    if ($scope.form1.$valid) {
     alert('OK.');
    }
    else {
     alert('failure.');
    }
   };
  });

下面是重点代码,自定义指令:

Angularjs自定义指令Directive详解

app.directive("isAdministrator", function ($q, $timeout) {
   var adminAccount = "Admin";
   var CheckIsAdministrator = function (account) {
    return adminAccount == account ? true : false;
   };
   return {
    restrict: "A",
    require: "ngModel",
    link: function (scope, element, attributes, ngModel) {
     ngModel.$asyncValidators.isAdministrator = function (value) {
      var defer = $q.defer();
      $timeout(function () {
       if (CheckIsAdministrator(value)) {
        defer.resolve();
       } else {
        defer.reject();
       }
      }, 700);
      return defer.promise;
     }
    }
   };
  });

演示:

Angularjs自定义指令Directive详解

以上所述是小编给大家介绍的Angularjs自定义指令Directive详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
react-redux中connect()方法详细解析
May 27 #Javascript
react-router实现跳转传值的方法示例
May 27 #Javascript
简单实现JavaScript弹幕效果
Aug 27 #Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 #Javascript
详解webpack打包vue时提取css
May 26 #Javascript
jQuery插件imgAreaSelect基础讲解
May 26 #jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 #jQuery
You might like
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
node.js通过url读取文件
2020/10/16 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
总经理职责范文
2013/11/08 职场文书
八一建军节活动方案
2014/02/10 职场文书
机电专业求职信
2014/06/14 职场文书
班级体育活动总结
2014/07/05 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
负责培养人意见
2015/06/05 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
高一作文之乐趣
2019/11/21 职场文书
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA