AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令
2. 自定义指令(15-17 章)
Module.directive(name, factory)
2.1 创建自定义指令的方法
Module.directive(name, factory)
示例 :<script> var myApp = angular.module('exampleApp', []) myApp.contorller('dayCtrl', function($scope){ var dayName = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Staturday"] $scope.day = dayName[new Date().getDay()]; }); myApp.directive("highlight", function(){ return function(scope, element, attrs){ if (scope.day == attrs["highlight"]{ element.css("color", "red") }) } }); </script> <body ng-app='exampleAPP'> <h4 ng-controller="dayCtrl" highlight="Monday"> Today is {{day || "(unknown)"}} </h4> </body> # scope, element, attrs 分别为 : 视图的作用域, 指令所应用到的元素, 该元素的属性. # scope 参数用于检查在视图中可用的数据, 该示例中, 该参数能获得 day 属性的值. # attrs 参数提供了指令所应用到的元素的属性的完整集合, 包括让指令起作用的那个属性, 即获取 highlight 属性的值. # element 是一个 jqLite 对象, 如果 highlight 属性的值与作用于中 day 变量的值相等, 就调用 element 参数来设置 HTML 内容. css 方法可以设置一个 css 属性值.
2.2 自定义指令的作用点
- 被当作属性使用
- 当做自定义 HTML 元素使用
3. 工厂函数与工人函数
所有的可用于创建 AngularJS 构件的 Module 的方法都可以接受函数作为参数. 这些函数通常被称为 工厂函数, 因为他们负责创建那些将被 AngularJS 用来执行工作的对象.
工厂函数通常会返回一个工人函数, 也就是说将被 AngularJS 用来执行工作的对象也是一个函数.
myApp.directive("highlight", function(){ // 此处 function 是一个 工厂函数
return function(scope, element, attrs){ // 工人函数
if (scope.day == attrs["highlight"]{
element.css("color", "red")
})
}
});不能够依赖于工厂函数或工人函数在某个特定时刻被调用
当希望注册一个构件时, 调用 Module 的方法;
当建立构件时 AngularJS 将调用工厂函数;
然后当需要使用该构件时就会调用工人函数.
这三个事件并一定会按照顺序立即调用.
AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令的更多相关文章
- AngularJS高级程序设计读书笔记 -- 大纲篇
零. 初衷 现在 AngularJS 4 已经发布了, 楼主还停留在 1.x 的阶段, 深感自卑. 学习 AngularJS 的初衷是因为, 去年楼主开始尝试使用 Flask 开发自动化程序, 需要用 ...
- AngularJS高级程序设计读书笔记 -- 控制器篇
作用域组成了一个能够用于在控制器之间形成通信的体系结构. 1. 控制器和作用域的基本原理 控制器就像领域模型与视图之间的纽带, 他给视图提供数据与服务, 并且定义了所需的业务逻辑, 从而将用户行为转换 ...
- AngularJS高级程序设计读书笔记 -- 模块篇
一. 模块基础 1. 创建模块 <!DOCTYPE html> <html ng-app="exampleApp"> <head> <ti ...
- AngularJS高级程序设计读书笔记 -- 服务篇
服务是提供在整个应用程序中所使用的任何功能的单例对象. 单例 : 只用一个对象实例会被 AngularJS 创建出来, 并被程序需要服务的各个不同部分所共享. 1. 内置服务 一些关键方法也被 Ang ...
- AngularJS高级程序设计读书笔记 -- 过滤器篇
一. 过滤器基础 过滤器用于在视图中格式化展现给用户的数据. 一旦定义过滤器之后, 就可在整个模块中全面应用, 也就意味着可以用来保证跨多个控制器和视图之间的数据展示的一致性. 过滤器将数据在被指令处 ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...
- javascript高级程序设计读书笔记-事件（一）
读书笔记,写的很乱 事件处理程序 事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别 没有DOM1 同样的事件 DOM0会顶掉html事件 因为他们都是属性 而 ...
- javascript高级程序设计读书笔记
第2章 在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...
- Javascript高级程序设计读书笔记（第六章）
第6章 面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新 ...
随机推荐
- DOS(Disk Operation System:磁盘操作系统)常见命令
学习Java语言的第一节课总是练习DOS命令,用记事本敲出自己的第一个Java语言的HelloWorld程序案例,在此特意总结一下基本的DOS命令以作记录和分享. Windows+R快捷键---> ...
- Docker学习总结（一）
<认识Docker> 不定期更新~~~~~~~ 历史区别: 13年之前:网络大多使用"协议栈堆叠"的形式进行开发,需要部署单一专有的服务器进行操作.包括(中间件,运行时 ...
- 针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析
最近被一朋友问到:css中设置一DOM的height:65px,请问显示的高度是否和Android的65dp的元素等高?脑子里瞬间闪现了一堆的概念,如dpr,ppi,dp,pt等,然而想了一阵,浆糊了 ...
- ionic创建项目遇到的各种问题
前提:执行创建语句的前提是ionic环境已经装好,开始执行ionic start myApp blank. 提示已经有同名项目,是否覆盖.这里创建的是一个blank(空) 的ionic项目.还要两种是 ...
- 结构体的vector resize()与初始化
序: 我们在使用vector的时候可以自定义里面的数据类型.例如这样: struct Edge{ int from; int to; int weight; }; vector<Edge> ...
- [笔记]ACM笔记 - 自用模板
长期更新. 快速幂 lld pow_mod(lld a, lld b, const int &pr) { lld ans = 1; while (b) { if (b & 1) ans ...
- Java学习笔记——浅谈数据结构与Java集合框架（第一篇、List）
横看成岭侧成峰,远近高低各不同.不识庐山真面目,只缘身在此山中. --苏轼 这一块儿学的是云里雾里,咱们先从简单的入手.逐渐的拨开迷雾见太阳.本次先做List集合的三个实现类的学习笔记 List特点: ...
- 一个使用openGL渲染的炫丽Android动画库二（碎片化曲面动画）
续一个使用openGL渲染的炫丽Android动画库 MagicSurfaceView v1.1.0发布, 新增碎片化曲面动画 地址:https://github.com/gplibs/android ...
- Bootstrap实现轮播图
第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="t ...
- 谷歌发布基于机器学习的Android APP安全检测系统：Google Play Protect
Google Play作为众所周知的在线应用市场,因为审查制度的松散,经常会有一些恶意软件伪装成其他应用混入其中.此前阿里聚安全小编就报道了2例关于恶意软件伪装在Google Play上的事件:< ...