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. Angular简易分页设计(一)：基本功能实现

    (首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/p/6752990.html) 之前网站的后台管理为了图快,把Jquer ...

  2. vsftp使用方法与问题解决

    安装环境 OS:Centos 6.4 vsftp:vsftpd-2.2.2-11.el6_3.1.i686.rpm vsftpd配置文件:/etc/vsftpd/vsftpd.conf 一.      ...

  3. 【iOS UI】UINavigationController

    1.UINavigationController介绍 1.1简介 UINavigationController可以翻译为导航控制器,在iOS里经常用到. 下面的图显示了导航控制器的流程.最左侧是根视图 ...

  4. 四、I/O

    九.什么是I/O: 9.1.在Windows程序中,基础的运行单位为线程,为每一个线程分配一个处理器,可以让系统执行多个操作, 9.2.当线程进行一个I/O操作时,会被挂起,从而影响性能,为了解决这类 ...

  5. ASP.NET Core 使用 JWT 搭建分布式无状态身份验证系统

    为什么使用 Jwt 最近,移动开发的劲头越来越足,学校搞的各种比赛都需要用手机 APP 来撑场面,所以,作为写后端的,很有必要改进一下以往的基于 Session 的身份认证方式了,理由如下: 移动端经 ...

  6. 在Windows上安装MongoDB

    原文官方文档:https://docs.mongodb.org/v2.6/tutorial/install-mongodb-on-windows/ 基于版本:MongoDB 2.6 概览 通过这个示例 ...

  7. Linux与堆栈概念

    在学习C/C++编程的时候,老师都会反复灌输一些概念.比如程序内变量在堆栈上的分配,栈是由高地址到低地址,堆是由低地址到高地址等等,然后画出这样一幅经典概念图: 图片来自:http://blog.cs ...

  8. 为Android内核添加新驱动

    转载地址:http://blog.chinaunix.net/uid-16759545-id-4892379.html 1. 在drives目录下添加hello目录,内含hello.c Kconfig ...

  9. MyBatis之级联——鉴别器

    鉴别器(discriminator)是MyBatis为我们提供的第三个级联也是最后一个.基于之前两篇级联中的场景,现增加学生们去体检,但男女体检项目不一样,我们把男女体检表做成两张表,当然我想也可以设 ...

  10. openMRS项目

    openMRS项目的背景:我们的世界继续遭受大规模的大流行,因为超过4000万人感染或死于艾滋病毒/艾滋病-大多数(高达95%)是在发展中国家.预防和治疗艾滋病毒/艾滋病这种规模需要有效的信息管理,这 ...