AngularJS directive入门例子

这是《AngularJS》这本书里面提供的一个例子：

JS代码：

var expanderModule=angular.module('expanderModule', [])
expanderModule.directive('expander', function() {return {restrict : 'EA',replace : true,transclude : true,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) {scope.showMe = false;scope.toggle = function toggle() {scope.showMe = !scope.showMe;}}}
});
expanderModule.controller('SomeController',function($scope) {$scope.title = '点击展开';$scope.text = '这里是内部的内容。';
});

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="ExpanderSimple.css"/></head><body><div ng-controller='SomeController'><expander class='expander' expander-title='title'>{{text}}</expander></div></body><script src="ExpanderSimple.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;
}

运行效果如下：

compile阶段进行标签解析和变换，link阶段进行数据绑定等操作！

在所有module都装载完毕在之后，compile(element)(scope);开始编译和链接整个dom树（其实就是调用dom上出现的指令）。

第一步：传递应用根节点给$compile函数，开始编译，返回link函数。

第二步：传递根作用域给link函数，开始链接（每个指令分为pre link 和 post link两个过程）

link函数的参数：

scope
这个就是当前control的$scope对象，没啥好说的。
element
这个是当前dom节点经过“jquery”处理过后的对象。用过jquery的都知道这个概念。当然这边的jquery是angular自己实现的阉割版的jquery。方法少了许多，不过按angular的话说，够用了。
attrs
这个对象包含，当前的dom节点上的各种属性标签的值。不过要注意的是这边会将xxx-bbb这种形式的改写成xxxBbb的这种驼峰形式。

转载于:https://www.cnblogs.com/bonelee/p/6202596.html

AngularJS directive入门例子相关推荐

angularjs directive 实例详解
angularjs directive 实例详解张映发表于 2014-03-13 前面提到了angularjs的factory,service,provider,这个可以理解成php的model ...
Cassandra 单机入门例子——有索引
入门例子: http://wiki.apache.org/cassandra/GettingStarted 添加环境变量并source生效,使得可以在任意位置执行cassandra/bin安装目录下的 ...
spark streaming 入门例子
spark streaming 入门例子: spark shell import org.apache.spark._ import org.apache.spark.streaming._sc.ge ...
图解VC++2012编译安装GDAL1.11.0和入门例子
相关下载 http://pan.baidu.com/s/1o7OEMc6 gdal1.rar - 入门例子 GDAL书籍代码及数据.rar gdal1110.zip - 下载的源码 GDAL.rar ...
AngularJS快速入门指南09：SQL
我们可以将之前章节中的代码用来从数据库中读取数据. 通过PHP Server从MySQL数据库中获取数据 <div ng-app="myApp" ng-controller= ...
Orleans入门例子
Orleans是微软开源的分布式actor模型框架.actor模型的原理网络上有很多文章.有许多理论性的文章,深刻地我都不知道怎么应用.在这里我就不赘述了.既然是博客,就说说自己的理解. 对于编程来说 ...
AngularJS快速入门指南03：表达式
AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...
AngularJS快速入门指南15：API
API即Application Programming Interface(应用程序接口). AngularJS全局API AngularJS全局API是一组全局JavaScript函数,用来进行一些 ...
Orleans 初接触（一）入门例子
[返回导航] 在简单了解了Orleans 之后我们可以通过几个例子去加深印象一.Orleans入门例子这个例子是跟着<Orleans入门例子>(https://www.cnblogs. ...

AngularJS directive入门例子

AngularJS directive入门例子相关推荐

最新文章

热门文章