-_-#【Angular】自定义指令directive
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="jquery-1.8.3.min.js"></script>
<script src="angular.min.js"></script>
<code lines>
//失去焦点使用 jQuery 的扩展支持冒泡
app.directive('ngBlur', function($parse){
return function($scope, $element, $attr){
var fn = $parse($attr['ngBlur']);
$element.on('focusout', function(event){
fn($scope, {$event: event});
});
}
});
</code> <div code lines>
//失去焦点使用 jQuery 的扩展支持冒泡
app.directive('ngBlur', function($parse){
return function($scope, $element, $attr){
var fn = $parse($attr['ngBlur']);
$element.on('focusout', function(event){
fn($scope, {$event: event});
});
}
});
</div>
<script>
var app = angular.module('Demo', [], angular.noop); app.directive('code', function() {
var func = function($scope, $element, $attrs) {
var html = $element.text();
var lines = html.split('\n'); //处理首尾空白
if (lines[0] == '') {lines = lines.slice(1, lines.length - 1)}
if (lines[lines.length-1] == '') {lines = lines.slice(0, lines.length - 1)} $element.empty(); //处理外框
(function() {
$element.css('clear', 'both');
$element.css('display', 'block');
$element.css('line-height', '20px');
$element.css('height', '200px');
})(); //是否显示行号的选项
if ('lines' in $attrs) {
//处理行号
(function() {
var div = $('<div style="width: %spx; background-color: gray; float: left; text-align: right; padding-right: 5px; margin-right: 10px;"></div>'
.replace('%s', String(lines.length).length * 10));
var s = '';
angular.forEach(lines, function(_, i) {
s += '<pre style="margin: 0;">%s</pre>\n'.replace('%s', i + 1);
});
div.html(s);
$element.append(div);
})();
} //处理内容
(function() {
var div = $('<div style="float: left;"></div>');
var s = '';
angular.forEach(lines, function(l) {
s += '<span style="margin: 0;">%s</span><br />\n'.replace('%s', l.replace(/\s/g, '<span> </span>'));
});
div.html(s);
$element.append(div);
})();
} return {
link: func,
restrict: 'AE' //以元素或属性的形式使用命令
};
});
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="jquery-1.8.3.min.js"></script>
<script src="angular.min.js"></script>
<p color="red">有颜色的文本</p>
<color color="red">有颜色的文本</color>
<script>
var app = angular.module('Demo', [], angular.noop); app.directive('color', function() {
var link = function($scope, $element, $attrs) {
$element.css('color', $attrs.color);
}
return {
link: link,
restrict: 'AE'
};
});
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="jquery-1.8.3.min.js"></script>
<script src="angular.min.js"></script>
<div ng-controller="TestCtrl">
<p color="color">有颜色的文本</p>
<p color="'blue'">有颜色的文本</p>
</div>
<script>
var app = angular.module('Demo', [], angular.noop); app.directive('color', function() {
var link = function($scope, $element, $attrs) {
console.log($attrs)
$scope.$watch($attrs.color, function(new_v) {
console.log(new_v)
$element.css('color', new_v);
});
}
return link;
}); app.controller('TestCtrl', function($scope) {
$scope.color = 'red';
});
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="jquery-1.8.3.min.js"></script>
<script src="angular.min.js"></script>
<div ng-controller="TestCtrl"></div>
<div id="a">A {{ text }}</div>
<div id="b">B </div>
<script>
var app = angular.module('Demo', [], angular.noop); app.controller('TestCtrl', function($scope, $compile) {
var link = $compile($('#a'));
//true参数表示新建一个完全隔离的scope,而不是继承的child scope
var scope = $scope.$new(true);
scope.text = '12345'; //var node = link(scope, function(){});
var node = link(scope); $('#b').append(node);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="jquery-1.8.3.min.js"></script>
<script src="angular.min.js"></script>
<div ng-controller="TestCtrl"></div>
<div id="a">A {{ text }}</div>
<div id="b">B </div>
<script>
var app = angular.module('Demo', [], angular.noop); app.controller('TestCtrl', function($scope, $compile) {
var link = $compile($('#a'));
var scope = $scope.$new(true);
scope.text = '12345'; var node = link(scope, function(clone_element, scope) {
clone_element.text(clone_element.text() + ' ...'); //无效
clone_element.text('{{ text2 }}'); //无效
clone_element.addClass('new_class');
}); $('#b').append(node);
});
</script>
</body>
</html>
-_-#【Angular】自定义指令directive的更多相关文章
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- Angular自定义指令（directive）
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- Angular之指令Directive系列
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...
- angularjs - 自定义指令(directive)
自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
随机推荐
- Gridview实现银行选择列表
[MainActivity.java] package com.example.activitydemo; import android.os.Bundle; import android.view. ...
- Delphi 2007体验！
Delphi 2007体验! baidu 内容摘要:CodeGear(From Borland) 公司公布了最新的Delphi 2007 For Win32版本号.作为一个 Delphi 的使用者,第 ...
- 严苛模式（StrictMode）
Android 2.3提供一个称为严苛模式(StrictMode)的调试特性,Google称该特性已经使数百个Android上的Google应用程序受益.那它都做什么呢?它将报告与线程及虚拟机相关的策 ...
- Failed dependencies: 检查依赖性错误 解决方法
centOs下: error: Failed dependencies: 检查依赖性错误 解决方法 刚才安装avast的linux版,结果出现了: [root@localhost /]# rpm -i ...
- XML在JAVA项目中的作用
java项目中,xml文件一般都是用来存储一些配置信息 一般的编程, 多数用来存储配置信息 . 拿JDBC来说,可以把数据库连接字符串写到xml,如果要修改数据源,只需要改xml就可以了,没必要再去重 ...
- Dhroid框架配置
1.将dhroid文件夹作为一个Module导入,dhroid下载地址 2.在build.gradle中的dependencies节点中添加compile project(':dhroid') dep ...
- Android界面刷新方法
Android提供了Invalidate方法实现界面刷新,但是Invalidate不能直接在线程中调用,因为他是违背了单线程模型:Android UI操作并不是线程安全的,并且这些操作必须在UI线程中 ...
- Java编程思想-泛型-简单泛型例子
基本类型无法做为类型参数 代码如下: /** * */ package test.thinkinjava.Generics; import java.util.ArrayList; import ja ...
- Android开发手记(15) 拨打电话和收发短信
1.Intent简介 Android组价之间的通信,由Intent来协助完成.Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Intent的描述,负责找到 ...
- sqlserver 将多行数据查询合并为一条数据
有这样一个需求:表T_FUN_TASK为任务表,有字段(TASKID,TASKNAME),表T_FUN_LOGBOOK为日志表,有字段(LOGID,TASKID,LOGDATE),一个任务可持续多天, ...