发表于： 2017-01-21 01:21:48
0 1278
今天完成的事情：
1.今天看了红宝书，angular一些基础知识
明天计划的事情：
1.继续看原生js基础知识
遇到的问题：
1.没遇到什么问题
收获：
1.自定义指令
ngular自定义指令的使用，使用-来代替驼峰命名法
注意为了避免与未来的HTML标准冲突，给自定义的指令假如前缀来代表定义的命名空间。例如my-directive
指令的生命周期开始于$compile方法，结束于link方法
自定义指令全部可设置的指令如下：
angular.module("myApp"，[])
.directive('myDirective',function(){ //指令名称myDirective
return{ //返回一个对象
restrict：String，//可选字符串参数，可以设置这个指令在DOM中可以何种形式被声明
//默认为A（attr（当做标签属性来使用））<div my-directive></div>
//设置为E(ele 直接当做标签来使用)<my-directive></my-directive>
//c类名 <div class='my-directive:expression;'></div>
//m注释<--directive:my-directive expression-->
//这些选项可以单独使用，也可以混合在一起使用
//angular.module('myDirective',function(){
return{
restrict:'EA' //输入元素或者属性
}
})
priority：Number，//优先级，可忽略，默认为0，ng-repeat优先级为1000，这样就可以保证在同一元素上，他总是在其他指令之前被调用
terminal：Boolean //布尔型，true或者 false，如果为false，这个参数用来告诉angular停止运行当前元素上比本指令优先级低的指令，优先级相同的指令还是会被执行，ng-if优先级略高于ng-view
template：string or template function ：//(字符串或函数)指令中的 一个重要属性，必须被设置其中一种
//1,一段HTML文本，
//2.可以接收两个参数的函数，参数为tElement和tAttrs
//在html模板中必须只有一个根html标签，且如果有换行则需要使用'/'
//例如：template：‘\
<div><--single root element -->\
<a href='http://google.com'>Click me</a>
<h1>When useing two elements,wrap them in a parent element</h1>
</div>
function(tElement,tAttrs){.......}
//更好的选择是使用templateUrl参数引用外部模板，参考下面参数
templateUrl：String， //字符串或函数，1.外部路径的字符串 2.接收两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串
//模板加载后，angular js会将它默认缓存到$templateCache服务中（可以提前加载模块到缓存中，提高加载速度）
replace：Boolean or String //布尔型 默认为false（模板内容会加载到标签内部），true（模板内容会替换当前标签）
scope：Boolean or Object //布尔或者对象，默认为false，设置为true时，会从父作用域继承并创建一个新的作用域对象
//ng-controller的作用，就是从父作用域继承并创建一个新的子作用域
//如果需要创建一个能够从外部原型继承作用域的指令，将scope属性设置为true
//设置一个对象，则能设置隔离作用域，scope属性设置为一个{}，如果这样做了，指令的模板就无法访问外部作用域了
//例如
.directive("myDirective",function(){
return{
restrict:'A',
scope:{},
priority:100,
template:'<div>Inside myDirective{{myProperty}}</div>'
}
});
//在scope对象中，还可以使用@，=，&来设置模板中数据的作用域和绑定规则
//@本地作用域属性：使用当前指令中的数据和DOM属性值进行绑定
//=双向绑定：本地作用域上的属性同父级作用域上的属性进行双向数据绑定
//& 父级作用域绑定：通过&可以对父级作用域属性进行绑定
//例如：
scope:{
ngModel:'=', //将ngModel同指定对象绑定
onSend:'&', //将引用传递给这个方法
fromName:'@'//存储与fromname相关联的字符串
}
transclude：bloolean， //默认为false，只有当你希望创建一个可以包含任意内容的指令时，才使用transclude：true
//如果指令使用了transclude参数，那么控制器中就无法监听数据模型的变化
controller：string or function（scope，element,attrs,transclude,otherInjectables）{.......} //(字符串或函数)注册在应用中的控制器的构造函数，
//使用函数，创建内链控制器，例如
angualr.module('myApp',[])
.directive('myDirective',function(){
restrict:'A',
controller:
function($scope,$element,$attrs,$transclude){
//控制器逻辑在这里
}
})
controllerAs:String, //可以在指令中创建匿名函数，例如
//.directive('myDirective',function(){
return{
restrict:'A',
template:'<h4>{{myController.msg}}</h4>'
controllerAs:'myController',
controller:function(){
this.msg='Hello World'
}};
});
requires:String //(字符串或数组)字符串代表另外一个指令的名字，如果没有前缀，指令将会在自身提供的控制器中进行查找，如果没有找到任何控制器(或具有指定名字的指令)就抛出一个错误
//例如：如果不适用^前缀，指令只会在自身的元素上查找控制器
//require:'ngModel'
//使用？如果当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数
//require:'ngModel'
//使用^如果添加了^前缀，指令会在上游的指令链中查找require参数所指定的控制器
//require:'^ngModel'
//使用^?将前面两个选项的行为组合起来，我们可选择的加载需要的指令并在父指令链中进行查找
//renquire:'^?ngModel'
link:function(scope.iElement,iAttrs){.......} //compile 选项本身并不会被频繁使用，但是link函数则会被经常使用
//当我们设置了link选项，实际上是创建了一个 postlink()函数，以便compile()函数可以定义链接函数
//compile 与link选项是互斥的，如果同时设置了这两个选项，那么会把conpile所返回的函数当做链接函数，而link选项本身会被忽略。
//通常情况下，如果设置了compile函数，说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作，在这个函数中进行注入添加和删除节点等DOM操作是安全的。
//用link函数创建可以操作DOM的指令。
//require'someController',
//link:function(scope,element,attrs,SomeController){
//在这里操作DOM，可以访问required指定的控制器
compile：function(tElement,tAttrs,transclude){
return{
pre:function(scope,iElement,iAttrs,controller){.......}
post:function(scope,iElement,iAttrs,controller){.......}
}
//或者
return function postLink(...){.....}
}}
}})
返回列表
评论