AngularJS-directive.js 基本指令

Posted 2020-08-25 8932809

这个文件中包括了一些项目中用到的小指令，例如导航条，广告条等。

指令部分很复杂，不能全部进行说明，这里先把项目用到的点简单说明一下吧，详细的在单独介绍。

指令中有很多配置，下面进行说明：

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);
                }
            }
        };
    }])