<!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. Element can be click when out of view

    WebDriver can't action the element when out of view Webdriver can't action the element when the elem ...

  2. CollectionFramework

  3. ActiveX控件(MFC篇)

    目录 第1章 VC++6.0创建控件    1 1.1 目标    1 1.1.1 方法    1 1.1.2 属性    1 1.1.3 事件    1 1.2 创建项目    2 1.3 项目结构 ...

  4. 将cantk runtime嵌入到现有的APP中

    1,先取cantk-runtime-demos到本地: git clone https://github.com/drawapp8/cantk-runtime-demos 2,创建一个Android ...

  5. 关于iOS7 设计师需要了解的十件事

    在今年的WWDC上,苹果推出了采用全新设计语言打造的iOS7.新系统弃用了诸如皮革.木质一类的伪3D拟真效果,取而代之的是更加简洁轻量的设计路线,其中文字排版成了重头戏,另外在某些方面也受到了扁平化设 ...

  6. Mybatis 学习-1

    本次MyBatis基础实例教程主要讲述MyBatis在项目中的配置方法,实体对象的关系映射.关联关系,以及如何实现一个BaseDao的功能 实例数据库的表结构 CREATE TABLE `blog_u ...

  7. WPF:linq

    /// <summary> /// 该药品是否存在发药信息 /// 存在返回true,否则返回false /// </summary> /// <param name=& ...

  8. Java初学之华容道游戏

    package hhuarongdao; public class example { public static void main(String args[]) { new Hua_Rong_Ro ...

  9. springmvc：BeanNameViewResolver访问内部资源视图对象和访问外部资源视图对象

    <!-- 处理器映射器 --> <bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerM ...

  10. replace(),indexOf(),substring(),split(),join(),——各种小知识点

    1.replace ———— 实现去除指定字符串功能,可以用空字符串代替,也可以去新字符代替已有的字符. var str="123_z.jpg"; str=str.replace( ...