AngularJs编写指令
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular1.3.14.min.js"></script>
</head>
<body>
<gys-directive></gys-directive>
<pp-directive value="www.baidu.com" text="链接一"></pp-directive>
<div pp-directive value="www.gugou.com" text="链接二"></div>
<script>
var appModule=angular.module("app",[]);
appModule.directive("gysDirective", function () {
return{
replace:true,
restrict:"E",
template:"<a href='http:ww.baidu.com'>百度</a>"
};
}).directive("ppDirective", function () {
return{
replace:true,
restrict:"EAC",
template:function(elem,attr){
return "<a href='"+attr.value+"'>"+attr.text+"</a>";
}
};
});
</script>
</body>
</html>
重点在于上面的return.
下面看看return中的所有的参数.
{
restrict: String,
priority: Number,
terminal: Boolean,
template: String or Template Function:
function(tElement, tAttrs) {...},
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // 返回一个对象或连接函数，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
return function postLink(...) { ... }
}
}
restrict是一个可选的参数。用于指定该指令在DOM中以何种形式被声明。默认值是A，即以属性的形式来进行声明。
E:<gys-directive></gys-directive> 标签
A: <div gys-directive="expression"></div> 属性
C: <div class="gys-directive:expression;"></div> 类名
M:<!--directive:gys-directive expression-->
priority:大多数指令会忽略这个参数，使用默认值0，但也有些场景设置高优先级是非常重要甚至是必须的。例如，ngRepeat将这个参数设置为1000，这样就可以保证在同一元素上，它总是在其他指令之前被调用。
terminal:这个参数用来停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会
被执行。例如：ngIf的优先级略高于ngView（它们操控的实际就是terminal参数），如果ngIf的表达式值为
true，ngView就可以被正常执行，但如果ngIf表达式的值为false，由于ngView的优先级较低就不会被执行。
template:参数是可选的，必须被设置为以下两种形式之一：
- 一段HTML文本；
- 一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串。tElement和tAttrs中的t代表template，是相对于instance的。
上面例子中都有.
templateUrl是可选的参数，可以是以下类型：
一个代表外部HTML文件路径的字符串；
一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。
replace:是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部,
transclude:除了替换和插入内容之外,还可以通过transclude属性将内容插入新的模板.当此属性设置为true的时候,指令中的字内容会被插入到,
ng-transclude的标签中.
上例中的结果是:
如果改成false.那么子内容将会被替换掉.
运行的结果:
一个示例点明了complie和link用法.(转载自:http://damoqiongqiu.iteye.com/blog/1917971)
css代码:
.expander {
border: 1px solid black;
width: 250px;
}
.expander>.title {
background-color: black;
color: white;
padding: .1em .3em;
cursor: pointer;
}
.expander>.body {
padding: .1em .3em;
}
Html代码:
<div ng-controller="SomeController">
<expander class="expander" myname="思思博士" expander-title='title'>
{{text}}
</expander>
</div>
var appModule=angular.module('app',[]);
appModule.directive('expander',function(){
return{
restrict:"EA",
replace:true,
transclude:true,
//下面这个scope到底是干嘛的 我是真看不出来了,希望知道的大神们给个解答啊.
scope:{
title:"=expanderTitle"
},
template:function(){
var html='<div>';
html+='<div class="title" ng-click="toggle()">{{title}}</div>';
html+='<div class="body" ng-show="showMe" ng-transclude></div></div>';
return html;
},
link:function(scope,element,attrs){
alert(attrs.myname);
scope.showMe=false;
scope.toggle=function(){
scope.showMe=!scope.showMe;
}
}
}
});
appModule.controller("SomeController",function($scope){
$scope.title="点击展开";
$scope.text="这是内部的内容.";
});
查看界面:
controller:参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数
angular.module('myApp', [])
.directive('myDirective', function() {
restrict: 'A',
controller: 'SomeController'
})
可以在指令内部通过匿名构造函数的方式来定义一个内联的控制器
angular.module('myApp',[])
.directive('myDirective', function() {
restrict: 'A',
controller:
function($scope, $element, $attrs, $transclude) {
// 控制器逻辑放在这里
}
});
我们可以将任意可以被注入的ng服务注入到控制器中，便可以在指令中使用它了。控制器中也有一些特殊的服务可以被注入到指令当中。这些服务有：
1. $scope
与指令元素相关联的当前作用域。
2. $element
当前指令对应的元素。
3. $attrs
由当前元素的属性组成的对象。
<div id="aDiv"class="box"></div>
具有如下的属性对象：
{
id: "aDiv",
class: "box"
}
4. $transclude
嵌入链接函数会与对应的嵌入作用域进行预绑定。transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。
angular.module('myApp',[])
.directive('myLink', function () {
return {
restrict: 'EA',
transclude: true,
controller:
function ($scope, $element,$attrs,$transclude) {
$transclude(function (clone) {
var a = angular.element('<a>');
a.attr('href', $attrs.value);
a.text(clone.text());
$element.append(a);
});
}
};
});
<my-link value="http://www.baidu.com">百度</my-link>
<div my-link value="http://www.google.com">谷歌</div>
controllerAs参数用来设置控制器的别名，这样就可以在视图中引用控制器甚至无需注入$scope。
<div ng-controller="MainController as main">
<input type="text" ng-model="main.name" />
<span>{{ main.name }}</span>
</div> javascript:
angular.module('myApp',[])
.controller('MainController', function () {
this.name = "Halower";
});
控制器的别名使路由和指令具有创建匿名控制器的强大能力。这种能力可以将动态的对象创建成为控制器，并且这个对象是隔离的、易于测试。
require为字符串代表另外一个指令的名字。require会将控制器注入到其所指定的指令中，并作为当前指令的链接函数的第四个参数。字符串或数组元素的值是会在当前指令的作用域中使用的指令名称。在任何情况下，ng编译器在查找子控制器时都会参考当前指令的模板。
- 如果不使用^前缀，指令只会在自身的元素上查找控制器。指令定义只会查找定义在指令作当前用域中的ng-model=""
- 如果使用?前缀,在当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数。
- 如果添加了^前缀，指令会在上游的指令链中查找require参数所指定的控制器。
- 如果添加了?^ 将前面两个选项的行为组合起来，我们可选择地加载需要的指令并在父指令链中进行查找
- 如果没有任何前缀，指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器（或具有指定名字的指令）就抛出一个错误
一个综合示例.和上面的示例同样来自一个地方.
js代码:
var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
template : '<div ng-transclude></div>',
controller : function() {
var expanders = [];
this.gotOpened = function(selectedExpander) {
angular.forEach(expanders, function(expander) {
if (selectedExpander != expander) {
expander.showMe = false;
}
});
}
this.addExpander = function(expander) {
expanders.push(expander);
}
}
}
});
expModule.directive('expander', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
require : '^?accordion',
scope : {
title : '=expanderTitle'
},
template : '<div>'
+ '<div class="title" ng-click="toggle()">{{title}}</div>'
+ '<div class="body" ng-show="showMe" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs, accordionController) {
scope.showMe = false;
accordionController.addExpander(scope);
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
accordionController.gotOpened(scope);
}
}
}
});
expModule.controller("SomeController",function($scope) {
$scope.expanders = [{
title : 'Click me to expand',
text : 'Hi there folks, I am the content that was hidden but is now shown.'
}, {
title : 'Click this',
text : 'I am even better text than you have seen previously'
}, {
title : 'Test',
text : 'test'
}];
});
HTML代码:
<html ng-app="expanderModule">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../angular-1.0.3/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="Accordion.css"/>
</head>
<body ng-controller='SomeController' >
<accordion>
<expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
{{expander.text}}
</expander>
</accordion>
</body>
<script src="Accordion.js"></script>
</html>
css代码:
.expander {
border: 1px solid black;
width: 250px;
}
.expander>.title {
background-color: black;
color: white;
padding: .1em .3em;
cursor: pointer;
}
.expander>.body {
padding: .1em .3em;
}
AngularJs编写指令的更多相关文章
- AngularJS之指令
紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...
- 学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- AngularJs自定义指令详解（2） - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- angularJS自定义指令间的“沟通”
由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- 《AngularJS》--指令的相互调用
转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...
随机推荐
- linux服务之vnc和x2go
三种方式连接linux桌面 1.传统的vnc linux桌面上安装vncserver windows桌面上安装vncviewer 2.x2go 在linux桌面上安装x2goserver与x2gose ...
- ZooKeeper伪分布集群安装及使用 RMI+ZooKeeper实现远程调用框架
使用 RMI + ZooKeeper 实现远程调用框架,包括ZooKeeper伪集群安装和代码实现两部分. 一.ZooKeeper伪集群安装: 1>获取ZooKeeper安装包 下载地址:ht ...
- linux Shell的使用
linux Shell的使用 下面是我对shell脚本使用的学习,写成日志,做个笔记,可以当做自己以后的复习. 1.输出hello world! vi test1.sh, 如果不会vi工具的使用,请参 ...
- HTML 链接
HTML 使用超级链接与网络上的另一个文档相连. 几乎可以在所有的网页中找到链接.点击链接可以从一张页面跳转到另一张页面. 实例 创建超级链接 本例演示如何在 HTML 文档中创建链接. 将图像作为链 ...
- js键盘事件全面控制详解【转】
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- HDU3507 print artical
题目大意:有N个数字a[N],每输出连续的一串,它的费用是 “这行数字的平方加上一个常数M”.问如何输出使得总费用最小.(n<=500000) 分析:动态规划方程为:dp[i]=dp[j]+M+ ...
- 虚拟研讨会：如何设计好的RESTful API？
http://www.infoq.com/cn/articles/how-to-design-a-good-restful-api/ REST架构风格最初由Roy T. Fielding(HTTP/1 ...
- 利用mtd工具实现嵌入式设备在线升级
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 主要思路是:通过web post方式将升级文件交给CGI程序处理,然后通过mtd工具实现设备在线升级. 1.页面部分 & ...
- 【转】c# winform DataGridView导出数据到Excel中，可以导出当前页和全部数据
准备工作就是可以分页的DataGridView,和两个按钮,一个用来导出当前页数据到Excel,一个用来导出全部数据到Excel 没有使用SaveFileDialog,但却可以弹出保存对话框来 先做导 ...
- Eclipse中Maven+Spring3.2.8+SpringMVC HelloWorld项目
本文适合有一定spring和springmvc基础,并想使用Maven管理项目的人. 源码打包:http://pan.baidu.com/s/1hqurUcs 转载请声明出处(http://www.c ...