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 将调用工厂函数;
然后当需要使用该构件时就会调用工人函数.
这三个事件并一定会按照顺序立即调用.