<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style>

    #div1 { position:absolute; left: 0; top: 0; width:150px; height:150px; border:1px red solid; background: red; cursor: pointer;}

    </style>

    <script src="jquery-1.11.1.js"></script>

    <script src="angular.min.js" ></script>

    <script type="text/javascript"> 

        var m1 = angular.module('myApp', []);

        // 指令是可以复用的

        m1.directive('myDrag', function() {

            // scope: 独立作用域, 只在当前标签起作用, 跟外面没有关系

            // 自定义指令内部数据的绑定方式, 共享的

            // @: 绑定的普通字符串 , = ：解析的是数据, &: 绑定的是父级函数的传递方式

            // 属性指令跟模板没有太大的关系

            return {

                restrict : 'A',

                link: function( scope, ele, attr ) {

                   var disX = 0, disY = 0;

                   attr.myDrag = angular.equals(attr.myDrag, 'true');

                   // alert( typeof attr.myDrag);

                   ele.on('mousedown', function(ev) {

                        var This = this;

                        disX = ev.pageX - $(this).offset().left;

                        disY = ev.pageY - $(this).offset().top;

                        if(attr.myDrag) {

                            var $line = $('<div>');

                            $line.css({ width : $(this).outerWidth() , height : $(this).outerHeight() , position : 'absolute' , left : $(this).offset().left , top : $(this).offset().top , border : '1px gray dotted'});

                            $('body').append($line);

                        }

                        $(document).on('mousemove', function(ev) {

                            // console.log($(this).get(0).tagName);

                            //

                            if(attr.myDrag) {

                                $line.css('left',ev.pageX - disX);

                                $line.css('top',ev.pageY - disY);

                            } else {

                                $(This).css('left', ev.pageX - disX);

                                $(This).css('top', ev.pageY - disY);

                            }

                        });

                        $(document).on('mouseup', function() {

                            $(document).off();

                             if(attr.myDrag) {

                                $(This).css('left',$line.offset().left);

                                $(This).css('top',$line.offset().top);

                                $line.remove();

                            }

                        });

                        return false;

                   });

                }

            };

        });

        m1.controller('tab', ['$scope', function($scope) {

             // $scope.age = 101;

        }]);

    </script>

</head>

<body ng-controller="tab">

    <div id="div1" my-drag="true"></div>

</body>

</html>

　　

angularjs 选项卡 --- 自定义属性的更多相关文章

  1. angularjs 选项卡tab切换（移动端用户订单状态）

    <!--头部导航tabs切换--> <div class="tabs-striped tabs-top tabs-background-positive tabs-colo ...

  2. angular实践第一弹：选项卡开发

    在学习angular的过程中,实践是最好的方法. 在开发选项卡的过程中,不需要再像jquery一样以DOM操作为核心,那什么样的情况是以DOM操作为核心的Jquery的思想呢? 一想到改变什么,就想设 ...

  3. 一篇入门AngularJS

    目录 1.AngularJS 应用 2.AngularJS 指令 3.AngularJS 表达式 4.AngularJS 模型 5.AngularJS 控制器 6.AngularJS 作用域 7.An ...

  4. angularjs 中的路由 与 bootstrap标签选项卡的冲突 解决方案

    当项目中使用了angularjs 的路由,则所有 像a标签的href 的链接都会走路由,实现页面跳转,那么有些地方需要使用选项卡,就会带来麻烦. 路由使用如下图: 某页面需要使用bootstrap的选 ...

  5. angularJS自定义属性作为条件中转

    <html> <head> <meta charset="utf-8"/> <title></title> </h ...

  6. Angularjs跳转切换至对应选项卡

    //跳转前页面 <div class="list user_order" ng-click="userOpen('userOrder',0)"> & ...

  7. angularjs实现选项卡实例

    注意:事件.循环.赋值在一起就出错 错误实例: <!DOCTYPE html> <html ng-app="tab_switch"> <head> ...

  8. AngularJs 指令实现选项卡

    HTML: <body ng-controller="Aaa"> <my-tab my-id="div1" my-data="dat ...

  9. 初探AngularJS

    一.前言 早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过.由于,在下个版本项目中用到了AngularJS,so,那就一起再来研究研究呗. 说到,这个Angula ...

随机推荐

  1. 常用的MYSQL 命令

    例1:建立一个名为xhkdb的数据库   mysql> create database xhkdb; 例2:显示数据库 命令:show databases (注意:最后有个s)mysql> ...

  2. c语言数据结构：递归的替代-------回溯算法

    1.要理解回溯就必须清楚递归的定义和过程. 递归算法的非递归形式可采用回溯算法.主要考虑的问题在于: 怎样算完整的一轮操作. 执行的操作过程中怎样保存当前的状态以确保以后回溯访问. 怎样返回至上一次未 ...

  3. UIStepper

    @在IOS5中增加了一个UIStepper的新控件,UIStepper可以连续增加或减少一个数值.控件的外观是两个水平并排的按钮构成,一个显示为“+”,一个显示为“-”. 1. 初始化控件 UISte ...

  4. TWaver HTML5 (2D)--基本概念

    基本概念 TWaver HTML5(以下简称TWaver)使用HTML5技术和javascript语言,可在支持HTML5的浏览器上进行绘图. 使用TWaver前,需熟悉几个基本概念:图元(Eleme ...

  5. Django开发博客- 页面美化

    css是一种用来描述某种标记语言写的web站点的样式语言.这里我们并不想展开讨论,关于CSS我在这里推荐一个很不错的资源: Codeacademy HTML & CSS course 不想从头 ...

  6. 【转】Linux下XenServer管理工具安装

    转载文章 - Linux下XenServer管理工具安装 Xen-Server 6.5 虚拟机安装Linux系统 vmware安装ubuntu12.04嵌套安装xen server(实现嵌套虚拟化) ...

  7. 有关Rander生成随机数的问题

    首先我们说的是要生成一个随机数要求传入两个参数.一个表示生成的个数,另外一个表示生成的长度 . public void shengchengsuijishu(int lenght) { '}; Ran ...

  8. android之merge布局

    <merge />标签闪亮登场了.当LayoutInflater遇到这个标签时,它会跳过它,并将<merge />内的元素添加到<merge />的父元素里. 用& ...

  9. Java 之 I/O 系列 02 ——序列化（一）

    Java 之 I/O 系列 目录 Java 之 I/O 系列 01 ——基础 Java 之 I/O 系列 02 ——序列化(一) Java 之 I/O 系列 02 ——序列化(二) 一 序列化概述 序 ...

  10. CommonJS规范(转)

    概述 CommonJS是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件 ...