您的位置：首页 > Web前端 > AngularJS

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

2016-06-10 13:09 627 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航