自定义指令directive
1.自定义指令
在angular中，module下面的directive方法用于创建自定义指令，用法：
m1.directive('myTab',function(){
return {
restrict : 'AE',
replace : true,
templateUrl : '',
};
});
大致用法如上，在directive的第二个参数里面return出一个对象，对象里面有各种属性。
restrict----指定创建的指令是什么类型，A--attr属性指令，E--element标签指令，C---class指令，M---注释指令.常用的就是A和E。
replace---是否用模板来替换元素
templateUrl---指定模板字符串
还有一些：
controller---指令控制器。这里面可以定义一些指定公用的数据和方法。如：
controller : ['$scope',function($scope){
$scope.name = 'meng';
$scope.show = function(n){
alert(n+1);
}
}],
scope---作用域，共有三个值
默认值false。
表示继承父作用域;
true
表示继承父作用域，并创建自己的作用域（子作用域）;
{}
表示创建一个全新的隔离作用域；
隔离作用域中有三种绑定策略--@，=，&
@ --- 使用@（@attr）来进行单向文本（字符串）绑定
= --- 使用=（=attr）进行双向绑定变量
& --- 使用&来调用父作用域中的函数
link：一个函数，用于操作dom，添加事件，指令间相互调用
该函数一共有4个参数，scope，element，attr,reController
scope --- 该指令的作用域
element--- 该指令解析后的顶层元素
attr-- 属性
指令之间交互 通过transclude和require
设置transclude：true之后，就可以通过ng-transclude来嵌套指令
require---字符串代表另一个指令的名字，它将会作为link函数的第四个参数
没有前缀，指令会在自身提供的控制器中进行查找，如果找不到任何控制器，则会抛出一个error
？如果在当前的指令没有找到所需的控制器，则会将null传给link连接函数的第四个参数
^如果在当前的指令没有找到所需的控制器，则会查找父元素的控制器
?^组合
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script>
</head>
<body> <outer-directive>
<inner-directive></inner-directive>
<inner-directive2></inner-directive2>
</outer-directive>
<script>
var app = angular.module('myApp', []);
app.directive('outerDirective', function() {
return {
scope: {},
restrict: 'AE',
controller: function($scope) {
this.say = function(someDirective) {
console.log('Got:' + someDirective.message);
};
}
};
});
app.directive('innerDirective', function() {
return {
scope: {},
restrict: 'AE',
require: '^outerDirective',
link: function(scope, elem, attrs, controllerInstance) {
scope.message = "Hi,leifeng";
controllerInstance.say(scope);
}
};
});
app.directive('innerDirective2', function() {
return {
scope: {},
restrict: 'AE',
require: '^outerDirective',
link: function(scope, elem, attrs, controllerInstance) {
scope.message = "Hi,shushu";
controllerInstance.say(scope);
}
};
}); </script> </body>
</html>
m1.directive('myTab',function(){
return {
restrict : 'E',
replace : true,
scope : {
myId : '@',
myData : '='
},
controller : ['$scope',function($scope){
$scope.name = 'meng';
}],
templateUrl : 'temp3.html',
link : function(scope,element,attr){
//console.log(scope.name);
//console.log(element);
//console.log(attr.myId);
}
});
自定义指令directive的更多相关文章
- angularjs - 自定义指令(directive)
自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...
- vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- angularJs自定义指令.directive==类似自定义标签
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...
- vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...
- vue 自定义指令directive
//自定义指令:directive 的传参--可以数据也可以是字符串 Vue.directive('scroll', function (binding) { window.addEventListe ...
随机推荐
- dedecms后台验证码显示不正常的四种处理办法
验证码不正确解决方法 分为两类解决方法 第一类:取消掉验证码,直接登录 第二类:修复验证码,回复验证码功能 四种常见的处理办法如下: 第一种:取消掉验证码具体方法如下 实现的方法一共分为两步来进行: ...
- 使用archlinux作为日常开发机已经半年了，随便写一下
机器配置 CPU: Intel Core i5-6200U CPU @ 2.8GHz RAM: 6114MiB / 7421MiB Resolution: 1920x2160 在arch下常用的软件 ...
- Java日志——2016年5月31日
1. 三元运算符(A?B:C)属于运算符,表达式必须具有返回值,则A必须是boolean类型值,B和C必须是一个具有返回值的表达式. 2. switch...case本质上只支持int类型的选择判断, ...
- Sql With as 用法
with district as ( select * from Area where AbbrTW= N'中國' union all select a.* from Ar ...
- 【转载】 C++多继承中重写不同基类中相同原型的虚函数
本篇随笔为转载,原文地址:C++多继承中重写不同基类中相同原型的虚函数. 在C++多继承体系当中,在派生类中可以重写不同基类中的虚函数.下面就是一个例子: class CBaseA { public: ...
- hibernate 注解 主键生成策略
一.JPA通用策略生成器 通过annotation来映射hibernate实体的,基于annotation的hibernate主键标识为@Id, 其生成规则由@GeneratedValue ...
- xargs的原理剖析及用法详解
转载请注明出处:http://www.cnblogs.com/f-ck-need-u/p/5925923.html 学习这个xargs花了很长时间,在网上翻了很久也查了很多书关于xargs的介绍,都只 ...
- 关于 Dev中的GridControl 中 GridView 的 PopulateColumns() 方法
最近使用Dev控件,Gridview绑定数据源后不能显示数据,于是在网上查询,说是使用PopulateColumns()方法,可以显示数据.试了一下,管用. 于是在所有更新数据源数据后,都用上了这句话 ...
- 【初学者教程】在电脑上安装Python，写第一个程序
欢迎来到Python的世界 1.存在Python 2和Python 3两个版本,我该用哪个?如果书是关于2的,下载2:如果书是关于3的,就下载3.建议用Python 3,不过用2也是可以的. 2.下载 ...
- 生成CIL的问题
private void testILMethod() { InventCountPlanLine planLine; ; update_recordSet planLine setting Coun ...