AngularJS-directive.js 基本指令
这个文件中包括了一些项目中用到的小指令，例如导航条，广告条等。
指令部分很复杂，不能全部进行说明，这里先把项目用到的点简单说明一下吧，详细的在单独介绍。
指令中有很多配置，下面进行说明：
restrict:表示这个指令时说明类型，如何来进行调用，有四个属性可以进行设置，E（只限元素明使用）A（只限属性使用）C（只限类名使用）M（只限注释使用），可以多选，一般常用的就是EA，这也时默认值。
link：之前一直对link和compile搞不太清，直到查了查资料才稍微理解了一下：
在angular启动之前，应用会进行编译和链接，这个时候作用于会和html进行绑定，这个过程包含两个阶段，其中编译阶段也就是compile就是在编译阶段运行的，所以在这个阶段，我们操作添加和删除dom是安全的（虽然angular不主张进行dom操作）
通常设置了compile函数，说明我们希望在指令和实时数据被放到dom之前进行dom操作，
link函数：在compile函数最后返回的一个回调函数，其实就是link函数，在编译过后会进行链接，这个函数也时我们经常用到的，compile在开发中，不是很常用到。
区别：compile函数的作用是对指令的模板进行转换
link的作用是在模型和视图之间进行关联，包括元素上进行事件监听。
socpe在链接阶段才会被绑定到元素上，因此在compile中使用scope是会报错的。
对于同一个指令的多个实例，compile只会执行一次，而link对于每个实例都会执行一次。
如果编写的compile中包含了link函数，那么link函数无效，程序会把compile函数当做返回函数处理。
scope:scope有三个值，分别是 true false {} 下面分开介绍
false : 表示继承并使用同一个作用域，也就是说指令内部发生变化，那么外部所对应的变量也会变化。
true: 表示继承并新建作用域，也就是说可以继承外部的作用域，但是在指令内部会新建一个副本，内部变化并不会影响到外部的变量
{}：可以在内部指定需要继承的变量，有三个值可以使用@,&,=
@
这是一个单项绑定的前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive my-name="{{name}}"></div>，注意，属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。
=
这是一个双向数据绑定前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive age="age"></div>,注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。
&
这是一个绑定函数方法的前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive change-my-age="changeAge()"></div>，注意，属性的名字要用-将多个个单词连接。
注意：在新创建指令的作用域对象中，使用属性的名字进行绑定时，要使用驼峰命名标准，比如下面的代码。
下面来看一下程序中的代码：
angular.module('liveApp.directives', [
'liveApp.constants',
'liveApp.services'
])
.directive('bannersLiveRoom', function () {
return{
restrict:'EA',
link: function (scope, element, attrs) {
scope.myInterval = 5000;
},
scope:{
roomImages:"=roomImages" //传入的参数名，如果有大写，需要和指令的规则一样，有一个 “-”
},
templateUrl:"../components/bannersLiveRoomTemp.html"
}
})
.directive('navigationBar', function () {
return{
restrict:'EA',
link: function (scope,element,attrs) {
scope.menuArray=[]; //暂时用假数据，以后用外部传入的数据。
switch (scope.barType){
case'main':
scope.menuArray.push({menu:'全部直播',sref:'.index_1'});
scope.menuArray.push({menu:'英雄联盟',sref:'.index_2'});
scope.menuArray.push({menu:'主机游戏',sref:'.index_3'});
scope.menuArray.push({menu:'反恐精英',sref:'.index_4'});
break;
case'divertingmain':
scope.menuArray.push({menu:'全部直播',sref:'.index_1'});
scope.menuArray.push({menu:'颜值',sref:'.index_2'});
scope.menuArray.push({menu:'舞蹈',sref:'.index_3'});
scope.menuArray.push({menu:'脱口秀',sref:'.index_4'});
break;
}
},
scope:{
barType:'@barType'
},
templateUrl:"../components/navigationBarTemp.html"
}
})
//直播间列表
.directive('liveRooms', function ($location,imgurl,userService,liveRoomService) {
return{
restrict:'EA',
link: function (scope, element, attrs) {
scope.imgurl=imgurl;
scope.comeroom= function (roomid) {
if(scope.roomType=="1"){
$location.path('/liveroom/'+roomid);
}
else{
$location.path('/myliveroom/'+roomid);
}
}
},
scope:{
roomTitle:"@roomTitle",
roomList:"=roomList",
roomType:'@roomType'
},
templateUrl:"../components/liveRoomsTemp.html"
}
})
.directive('ngThumb', ['$window', function($window) {
var helper = {
support: !!($window.FileReader && $window.CanvasRenderingContext2D),
isFile: function(item) {
return angular.isObject(item) && item instanceof $window.File;
},
isImage: function(file) {
var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}
};
return {
restrict: 'A',
template: '<canvas/>',
link: function(scope, element, attributes) {
if (!helper.support) return;
var params = scope.$eval(attributes.ngThumb);
if (!helper.isFile(params.file)) return;
if (!helper.isImage(params.file)) return;
var canvas = element.find('canvas');
var reader = new FileReader();
reader.onload = onLoadFile;
reader.readAsDataURL(params.file);
function onLoadFile(event) {
var img = new Image();
img.onload = onLoadImage;
img.src = event.target.result;
}
function onLoadImage() {
var width = params.width || this.width / this.height * params.height;
var height = params.height || this.height / this.width * params.width;
canvas.attr({ width: width, height: height });
canvas[0].getContext('2d').drawImage(this, 0, 0, width, height);
}
}
};
}])
