angularjs 选项卡 --- 自定义属性

<!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>

  

时间: 2024-11-05 20:32:30

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

AngularJs选项卡的不同写法

AngularJs选项卡的写法有很多,每个人都会有自己的一个写法,今天我来给大家展示两种不同写法的AngularJs选项卡! 方法一: 1.创建选项卡,我是在控制器里创建数组将其渲染在页面上: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>选项卡1</title> <style> #ul{

一篇入门AngularJS

目录 1.AngularJS 应用 2.AngularJS 指令 3.AngularJS 表达式 4.AngularJS 模型 5.AngularJS 控制器 6.AngularJS 作用域 7.AngularJS 过滤器 8.AngularJS 服务 9.AngularJS 表格 10.AngularJS 表单 11.AngularJS API 12.AngularJS 包含 13.AngularJS 样式 13.AngularJS 动画 14.AngularJS 依赖注入 15.Angula

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

<html> <head> <meta charset="utf-8"/> <title></title> </head> <body ng-app="components"> <div ng-controller="c1"> <myelement alert="loadData1()"> <h1>哈哈<

angularjs实现选项卡实例

注意:事件.循环.赋值在一起就出错 具体实现: <!DOCTYPE html> <html ng-app="test"> <head> <title>选项卡实例</title> <script src="js/angular.js" charset="utf-8"></script> <style type="text/css">

AngularJs我的学习整理(不定时修改)

最近一月份的日子,学习了AngularJs,还只是刚刚入门而已.了解了基本的语法规则以及很简单的应用.仔细想想,学习AngularJs的时间大概半个月的时间,每天花在AngularJs上两三个小时. 在短短的学习入门时间,也想简简单单地做一个阶段性的总结.下一次的学习应该是进阶.计划准备在NodeJs入门之后进阶AngularJs和NodeJs. AngularJs是什么东东? AngularJS 使得开发现代的单一页面应用程序变得更加容易(单一页面应用程序SPAs:Single Page Ap

【JS学习笔记】关于选项卡,关于this,关于innerHTML

this:当前发生事件的元素. 简易的选项卡代码.思路,先把所有的都隐藏,再把当前的显示出来. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">&

AngularJS(1)

在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 2. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. 3. AngularJS 通过 指令 

走进AngularJs(一)angular基本概念的认识与实战

一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维护它时,便一直在关注,看到其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.朝思暮想良久,决定深入学习angular,并写系列博客,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己是一名学习者,会以学习者的角度来整理我的行文思路,故该系

初探AngularJS

一.前言 早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过.由于,在下个版本项目中用到了AngularJS,so,那就一起再来研究研究呗. 说到,这个AngularJS,其核心就是对HTML标签的增强. 何为HTML标签增强? 其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签.自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive). 至于说AngularJS是MVC,亦或MVVM框架? 都不是,它是M