标签：module 广告 参数 英雄 启动 service 数据绑定 需要 user
这个文件中包括了一些项目中用到的小指令，例如导航条，广告条等。
指令部分很复杂，不能全部进行说明，这里先把项目用到的点简单说明一下吧，详细的在单独介绍。
指令中有很多配置，下面进行说明：
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); } } }; }])
标签：module 广告 参数 英雄 启动 service 数据绑定 需要 user
原文地址：http://www.cnblogs.com/y8932809/p/6225327.html
