1.angularJs中提供了很多内置指令,它还有很强大的功能就是自定义指令
指令:我们可以理解为在特定DOM上运行的函数,指令可以控制这个元素的功能,正是指令使得angularJs这个框架变得强大
我们可以用directive()这个方法用来定义指令
directive()指令可以接受两个参数
1> name(字符串)指令的名字 用来在视图中引用特定的指令
2>factory_function(函数) :这个函数返回的是一个对象,其中定义了指令的全部行为.
2.定义指令行为的相关属性 键值对
angular.module('myApp', [])
.directive('myDirective', function() { return {//它告诉AngularJS这个指令在DOM中可以何种形式被声明 默认是是A 以属性的形式进行声明
restrict: String,priority: Number,//优先级terminal: Boolean,//这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令template: String or Template Function: //一段HTML文本;function(tElement, tAttrs) (...},templateUrl: String,//用于将’其他html’文件渲染进入含有对应指令的html中。当然这里的’其他html’里面可以有我们的指令或者表达式,其实就是代码段,和在当前页面一 样使 用,只是抽离出去了,方便管理。这里会用异步请求的方式来得到这个文件。注意:此处会发送一个xhr请求。replace: Boolean or String,//,如果设置了这个参数,值必须为true,因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部:scope: Boolean or Object, 比如scope :true 如果为true 则指令模板可以访问外部作用域的 或 scope :{} 这样指令模板无法访问外部作用域 主要因为隔离作用域的原因transclude: Boolean,controller: String orfunction(scope, element, attrs, transclude, otherInjectables) { ... },controllerAs: String,可以给controller 起个别名简化操作require: String,require参数可以被设置为字符串或数组,字符串代表另外一个指令的名字。require会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数。link: function(scope, iElement, iAttrs) { ... },//进行DOM 操作compile: // 返回一个对象或连接函数,如下所示:function(tElement, tAttrs, transclude) { return { pre: function(scope, iElement, iAttrs, controller) { ... },post: function(scope, iElement, iAttrs, controller) { ... }}// 或者return function postLink(...) { ... }3.
初识自定义指令