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. JAVA中令人疑惑的字符串

    Java中不同的字符串存在于同一个存储池中,字符串变量将指向存储池中相应的位置,也就是字符串变量里面包含的并不是字符串而是这个字符串对象的内存地址. String a = "123" ...

  2. Mysql net start mysql启动,提示发生系统错误 5 拒绝访问,原因所在以及解决办法

    1,Mysql net start mysql启动,提示发生系统错误 5 拒绝访问 在dos下运行net  start MySQL 不能启动mysql!提示发生系统错误 5:拒绝访问!切换到管理员模式 ...

  3. python之基础中的基础（一）

    python是一个效率极高的语言,现在市面上的机器学习大部分是由python和R语言完成,所以在不久之前小仙心中便种下了学习python的想法.下面是这一个月多月以来学习的总结,都是基础中基础了. 1 ...

  4. hibernate的映射关系之一对多

    关系:事物之间相互作用.相互联系的状态.范围最大. 联系:在关系数据库中表示实体与实体之间的联系,1:1,1:n,m:n. 关联:表示对象之间的关系,既有数量性,又有方向性:动词:将对象之间通过某种方 ...

  5. shop_list

    #!/usr/bin/env python # -*- coding: utf-8 -*- #输出商品列表,用户输入序号,显示用户选中的商品 li = ["手机", "电 ...

  6. CSS之定位布局（position，定位布局技巧）

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

  7. Struts2之 OGNL表达式和值栈

    技术分析之OGNL表达式概述(了解)        1. OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写        * 所谓对象图,即以任意 ...

  8. 服务器端IIS中部署带Office组件程序

    开发的程序需要用到Office组件(Word.Excel等)的时候,往往在开发环境中运行正常,但是部署到服务器上就出问题. 1)首先保证开发环境引用的dll正确 .net 4.0以上版本,添加引用Mi ...

  9. 高性能linux服务器内核调优

    高性能linux服务器内核调优 首先,介绍一下两个命令1.dmesg 打印系统信息.有很多同学们服务器出现问题,看了程序日志,发现没啥有用信息,还是毫无解决头绪,这时候,你就需要查看系统内核抛出的异常 ...

  10. cd命令使用详解

    cd命令是目录切换命令,是shell内置命令. 语法: cd [-L|-P] [dir] 选项: -p 如果要切换到的目标目录是一个符号连接,直接切换到符号连接指向的目标目录 -L 如果要切换的目标目 ...