码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS-directive.js 基本指令

时间:2016-12-27 16:00:03      阅读:274      评论:0      收藏:0      [点我收藏+]

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

 

AngularJS-directive.js 基本指令

标签:module   广告   参数   英雄   启动   service   数据绑定   需要   user   

原文地址:http://www.cnblogs.com/y8932809/p/6225327.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!