AngularJS的directive(指令)配置选项说明
var appModule = angular.module("appModule", []);
appModule.controller("Ctrl", ["$scope", "$timeout", function($scope, $timeout) {
$scope.naomi = { name: "Naomi", address: "1600 Amphitheatre" };
$scope.igor = { name: "Igor", address: "123 Somewhere" };
$scope.vojta = { name: "Vojta", address: "3456 Somewhere Else" };
$scope.format = "M/d/yy h:mm:ss a";
$scope.name = "Tobias";
$scope.hideDialog = function () {
$scope.dialogIsHidden = true;
$timeout(function () {
$scope.dialogIsHidden = false;
}, 2000);
};
}]);
appModule.directive('myTabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function($scope) {
var panes = $scope.panes = []; $scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}; this.addPane = function(pane) {
if (panes.length == 0) {
$scope.select(pane);
}
panes.push(pane);
};
},
templateUrl: 'my-tabs.html'
};
});
appModule.directive('myPane', function() {
return {
require: '^myTabs',
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
templateUrl: 'my-pane.html'
};
});
appModule.directive("myDraggable", ["$document", function($document) {
return function(scope, elem, attrs) {
var startX = 0, startY = 0, x = 0, y = 0;
elem.css({
position: "relative",
border: "1px solid red",
backgroundColor: "lightgrey",
cursor: "pointer"
});
elem.on("mousedown", function(event) {
// 组织所选对象的默认拖曳操作
event.preventDefault();
startX = event.pageX - x;
startY = event.pageY - y;
$document.on("mousemove", mousemove);
$document.on("mouseup", mouseup);
});
function mousemove(event) {
y = event.pageY - startY;
x = event.pageX - startX;
elem.css({
top: y + "px",
left: x + "px"
});
}
function mouseup() {
$document.off("mousemove", mousemove);
$document.off("mouseup", mouseup);
}
}
}]);
appModule.directive("myDialog", function() {
return {
restrict: "E",
transclude: true,
scope: {
"close": "&onClose"
},
templateUrl: "my-dialog.html",
link: function (scope, ele, attrs) {
scope.name = "Jeff";
}
};
});
appModule.directive("myCustomer", [function() {
return {
restrict: "E",
scope: {
customerInfo: "=info"
},
transclude: true,
template: "",
templateUrl: "tpls.html",
link: function(scope, element, attrs) { }
};
}]);
appModule.directive("myCurrentTime", ["$timeout", "dateFilter", function($timeout, dateFilter) {
return {
link: function (scope, element, attrs) {
var format, timeoutId;
function updateTime() {
//使用内置dateFilter服务
element.text(dateFilter(new Date(), format));
//使用内置$filter服务
//element.text($filter("date")(new Date(), format));
}
scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateTime();
});
function scheduleUpdate() {
timeoutId = $timeout(function() {
updateTime();
scheduleUpdate();
}, 1000);
}
element.on("$destroy", function() {
$timeout.cancel(timeoutId);
});
scheduleUpdate();
}
}
}]);
创建指令
$compile
服务会查找一个名叫myTabs的控制器,如果没有找到,就会抛出一个错误。该选项的值可以分别用前缀?、^和?^进行修饰,也可以不修饰。使用^
前缀意味着指令将会在它的父元素上面搜索控制器,使用?前缀就意味着如果在当前指令没有找到控制器,就将null作为link的第四个参数,如果将?和^结合起来,我们就可以既指定上游指令,又可以在找不到时,不抛出严重的错误。没有前缀修饰,指令默认只在所属元素上搜索指定的控制器。restrict
该选项指定创建指令的方式,创建方式有E(元素),A(属性),C(类名),M(注释),因此可以取值"E","EA","EAC","EACM"等等。最佳实践:最好通过标签名和属性来使用指令而不要通过注释和类名。这样做可以更容易地看出一个元素是跟哪个指令匹配的。通常注释式命名式指令使用在如下情景:某些指令需要跨越多个元素,但是受DOM API的限制,无法跨越多个元素(比如<table>元素)。 AngularJS 1.2 引入了ng-repeat-start和ng-repeat-end指令,作为更好的解决方案。 建议开发者使用这种方式,而不要用“自定义注释”形式的指令。什么情况下该用元素名,什么情况下该用属性名? 当创建一个含有自己模板的组件的时候,建议使用元素名,常见情况是,当你想为你的模板创建一个DSL(特定领域语言)的时候。如果仅仅想为已有的元素添加功能,建议使用属性名。
<div bind-to-this="thing">
,你就要使用'=bindToThis'的绑定。scope的绑定策略:=代表与父作用域中的属性双向绑定,@代表把当前属性作为字符串传递,也可绑定父作用域的值,&代表传递一个来自父作用域的函数,稍后调用。element.on('$destroy', ...)
或scope.$on('$destroy', ...)来执行一个清理的工作。AngularJS的directive(指令)配置选项说明的更多相关文章
- angularjs中directive指令与component组件有什么区别?
壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...
- AngularJS中Directive指令系列 - scope属性的使用
文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...
- AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...
- 关于Angularjs写directive指令传递参数
包子又来啦.... 在Angularjs当中,我们可能会经常要写directive指令.但是指令如果要共用的话,肯定是有细微的差别的,所以这些差别可能需要一个参数来决定 所以如何在指令中传递参数呢.. ...
- Angularjs之directive指令学习笔记(二)
1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...
- 【angularJS】Directive指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML.指令是扩展的 HTML 属性,带有前缀 ng-. 内置指令 1.ng-app 指令初始化一个 AngularJS 应用程序. 定义了 A ...
- angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)
angular js 中模板的使用.事件绑定以及指令与指令之间的交互 相应教学视频地址(需FQ):v=aG8VD0KvUw4">angularjs教学视频 <!doctype h ...
- AngularJS clone directive 指令复制
需求背景: directive模块化某表单信息,但表单信息可加入多条.此时就涉及到clone directive. 解决方式: 能够通过使用angularjs中$com ...
- AngularJS中Directive指令系列 - bindToController属性的使用
默认false.这个属性用来绑定scope的属性直接赋给controller.可以为true或者和scope相同格式的对象. 此外使用此属性,要设置controller的别名,通常通过"co ...
- AngularJS中Directive指令系列
近段时间在研究Angular中的directive用法,打算写个系列.以官方文档为主.并参考诸多教程.加上自己的思考. 基本概念及用法 scope属性的使用. &, <, =, @ 符 ...
随机推荐
- HDU(1175),连连看,BFS
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1175 越学越不会,BFS还是很高级的. 连连看 Time Limit: 20000/100 ...
- C++引入自定义类(同一项目下 和 不同项目下的 区别)
今天遇到的问题,使用其他项目中的类时,引入头文件无效,然后发现如下: 项目B: 自定义类B BPro.h #include<iostream> using namespace std; c ...
- python学习笔记五 模块上(基础篇)
模块学习 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要 ...
- 分布式算法一——一致性hash算法
摘自:http://blog.csdn.net/sparkliang/article/details/5279393
- java配置问题
先安装jdk.然后这样设置:**********************全为系统变量**************************变量名:JAVA_HOME变量值:D:\Program File ...
- BFC——一个我们容易忽视掉的布局神器
今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素 效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-lev ...
- Python if条件语句
1. if 条件语句 if 条件: 内容1 内容2 else: 内容3 内容4 # 一个等号是赋值(=) # 两个等号是比较(==) #不等号(!=) #if 条件1 and 条件2(并且) #if ...
- 【leetcode❤python】101. Symmetric Tree
#-*- coding: UTF-8 -*-# Definition for a binary tree node.# class TreeNode(object):# def __init_ ...
- HDU 5059 Harry And Biological Teacher
链接:http://acm.hdu.edu.cn/showproblem.php?pid=5069 题意:给出n个串,m个询问,每个询问(u,v),求u的一个最长后缀是v的前缀. 思路:离线.将关于u ...
- 3d中的向量
向量基础知识 向量有且仅有的两个属性:方向长度(注意:向量性情中不包含位置信息) 向量相等就是其两个属性相等 向量处理标记位置:当向量的起始点与坐标原点重合,这样我们就可以用向量的终点坐标来描述一个处 ...