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高级程序设计读书笔记 -- 指令篇 之 自定义指令的更多相关文章

  1. AngularJS高级程序设计读书笔记 -- 大纲篇

    零. 初衷 现在 AngularJS 4 已经发布了, 楼主还停留在 1.x 的阶段, 深感自卑. 学习 AngularJS 的初衷是因为, 去年楼主开始尝试使用 Flask 开发自动化程序, 需要用 ...

  2. AngularJS高级程序设计读书笔记 -- 控制器篇

    作用域组成了一个能够用于在控制器之间形成通信的体系结构. 1. 控制器和作用域的基本原理 控制器就像领域模型与视图之间的纽带, 他给视图提供数据与服务, 并且定义了所需的业务逻辑, 从而将用户行为转换 ...

  3. AngularJS高级程序设计读书笔记 -- 模块篇

    一. 模块基础 1. 创建模块 <!DOCTYPE html> <html ng-app="exampleApp"> <head> <ti ...

  4. AngularJS高级程序设计读书笔记 -- 服务篇

    服务是提供在整个应用程序中所使用的任何功能的单例对象. 单例 : 只用一个对象实例会被 AngularJS 创建出来, 并被程序需要服务的各个不同部分所共享. 1. 内置服务 一些关键方法也被 Ang ...

  5. AngularJS高级程序设计读书笔记 -- 过滤器篇

    一. 过滤器基础 过滤器用于在视图中格式化展现给用户的数据. 一旦定义过滤器之后, 就可在整个模块中全面应用, 也就意味着可以用来保证跨多个控制器和视图之间的数据展示的一致性. 过滤器将数据在被指令处 ...

  6. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

  7. javascript高级程序设计读书笔记-事件（一）

    读书笔记,写的很乱   事件处理程序   事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别  没有DOM1 同样的事件 DOM0会顶掉html事件   因为他们都是属性  而 ...

  8. javascript高级程序设计读书笔记

    第2章  在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...

  9. Javascript高级程序设计读书笔记（第六章）

    第6章  面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新 ...

随机推荐

  1. CSS垂直和水平居中

    在css中,居中使用十分频繁. 居中分为水平和垂直居中 水平居中十分简单: body{ background:#f90; } body统一为这个颜色 div { margin:0 auto; back ...

  2. mysql分页查询优化

    由于MySql的分页机制:并不是跳过 offset 行,而是取 offset + N 行,然后返回放弃前 offset 行,返回N 行, 所以当 offset 特别大的时候,效率就非常的低下,要么控制 ...

  3. 关于Canvas Rect Transform 设置问题？

    Render Mode: Screen Space - Overlay:将UI放置在场景的上面,调节场景大小或调整分辨率,则Canvas也会随之调整. Screen Space - Camera:Ca ...

  4. 分针网—IT教育： Html / CSS常见问题的解决方案

    1. 解决Safari下input光标过大   2. 设置浮层   3. CSS绘制三角形   4. 清除浮动   1) 浮动元素父级添加样式   2) 父元素后添加伪元素     3) 同样可以使用 ...

  5. C#文件下载（适用于各个浏览器）

    1.cs代码 public void DownFile(string filePath ,string fileName ) { // filePath 文件路径 例如:/File/记录.xlsx / ...

  6. TCP协议简介

    1.TCP协议的特点 TCP是面向连接的运输层协议 每一条TCP连接只能有两个端点.TCP只能进行点对点通信 TCP提供可靠交付的服务.通过TCP连接传输的数据,无差错.不丢失.不重复.并且按序到达 ...

  7. Android码农如何一个星期转为iOS码农（不忽悠）

    WeTest 导读 作为一个android客户端开发,如果你不懂点ios开发,怎么好意思说自己是客户端开发呢,本文讲解如何让android开发码农在一个星期上手IOS开发 --<记录自己IOS开 ...

  8. Ubuntu设置终端相对短路径

    这个设置相对实际上是比较简单的.在自己的家目录打开.bashrc 找到PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w\$' 只需要将w修改为大写W保存, ...

  9. .Net Core 连输入中文都变坑了...

    前不久Core诞生时候,那个时候我也在项目上没时间去尝那青涩的味道.今天刚刚装上2017就等不及的试了一下. 先创建了一个控制台的应用程序,然后在Main()方法中写了几句话,就等不及的Ctrl+F5 ...

  10. 使用Fiddler进行http抓包和调试

    本文目录 : Fiddler的工作原理 Fiddler的常用操作 支持https解密分析 Fiddler的断点调试 本文小结 参考文献 俗话说:工欲善其事,必先利其器. Fiddler是windows ...