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 相关文章推荐
js读取配置文件自写
Feb 11 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
移动端js图片查看器
Nov 17 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
js new Date()实例测试
Oct 31 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
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错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
Python实现求数列和的方法示例
2018/01/12 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python字符串的index和find的区别详解
2020/06/20 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
公务员的自我鉴定
2013/10/26 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
超越自我演讲稿
2014/05/21 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
2014年政协工作总结
2014/12/09 职场文书
硕士学位申请报告
2015/05/15 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书