今天学习angularjs自定义指令Directive。
Directive是一个非常棒的功能。可以实现我们自义的的功能方法。

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

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

<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>

Source Code

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

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

以上是ASP.NET MVC bundle了。

定义一个App:

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

定义一个控制器:

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

Source Code

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

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;
}
}
};
});

Source Code

演示:

angularjs自定义指令Directive的更多相关文章

  1. angularjs - 自定义指令(directive)

    自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...

  2. angularJs自定义指令.directive==类似自定义标签

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...

  3. AngularJS自定义指令directive:scope属性 (转载)

    原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...

  4. AngularJS 自定义指令directive 介绍

    --------------------------------------------------------------------------- 指令的作用是把我们自定义的语义化标签替换成浏览器 ...

  5. angularjs 一篇文章看懂自定义指令directive

     壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...

  6. AngularJs自定义指令详解(1) - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  7. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  9. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

随机推荐

  1. Salesforce服务云简介

    服务云简介 Salesforce的服务云(Service Cloud)是专注于客服和呼叫中心解决方案的子系统.它是Salesforce核心CRM系统的一部分. 服务云特性 服务云提供了客户服务和呼叫中 ...

  2. ActiveReports公开课开启报名,学习如何解决中国式复杂报表难题

    ActiveReports实战教学 90分钟解决中国式复杂报表六大需求 [开课时间]4月19日 [主讲老师]葡萄城资深报表专家 [培训方式]网络在线公开课 报名地址

  3. SpringMVC处理请求

    HttpServletBean HttpServletBean主要参与了创建工作,并没有涉及请求的处理. FrameworkServlet FrameworkServlet的service方法里添加了 ...

  4. linux 开机自启动脚本

    在/etc/rc.local文件中添加自启动命令(其中一种方法) 1.案例,就用博主本人之前发的博文 “nginx + flask + uwsgi + centos + python3 搭建web项目 ...

  5. redis-4.0.11主从配置初步探究

    redis-4.0.11相较于以前版本,新增了几个安全措施,稍稍研究了6379.conf配置文件,在这里记录一下. 实验环境: centos7.4 redis:redis-4.0.11 1. redi ...

  6. https证书概念

    https://studygolang.com/articles/10776 http://www.360doc.com/content/15/0520/10/21412_471902987.shtm ...

  7. IDEA 编译 Jmeter 5.0(二次开发)

    windows10 操作系统,jdk1.8,Intellij IDEA 2018,jmeter5.0 1.下载 http://jmeter.apache.org/download_jmeter.cgi ...

  8. Postgresql - jsonb_pretty & dateStyle

    1. SHOW datestyle; DateStyle ----------- ISO, MDY(1 row) INSERT INTO container VALUES ('13/01/2010') ...

  9. Centos7系统如何不重启系统识别新添加的硬盘?

    今天在系统开机后插入三块硬盘,结果没有一块硬盘被系统识别到.后来找到了方法. echo "- - -" > /sys/class/scsi_host/host0/scan 上 ...

  10. Django学习---笔记一

    一. 新建虚拟机在虚拟中完成项目 1.新建虚拟机 mkvirtalenv  虚拟机名称 2.进入虚拟机 cd   新建的虚拟机名称 3.安装Django pip install django 4.Dj ...