previews.js
4.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/**
* Created by Administrator on 2015/2/27.
*/
angular.module("xn.directive.preview",[])
.directive("imagePreview", function() {
"use strict";
return {
restrict:"AEC",
scope: {
imgUrl: "="
},
link: function($scope, element, attrs, controller, transcludeFn) {
$(element).css("cursor", "pointer");
if(!$scope.imgUrl)
return ;
if($scope.imgUrl.indexOf("@")!=-1)
$scope.imgUrl = $scope.imgUrl.split("@")[0];
$scope.htm = "<div id='shade_div' class='shade_div'>";
$scope.htm += "<div id='img_div' class='img_div'>";
$scope.htm += "<div class='close_div' title='关闭' id='close_div'><i class='icon icon-close'></i></div>";
$scope.htm += "<img src='"+$scope.imgUrl+"' class='img_cl'/>";
$scope.htm += "</div>";
$scope.htm += "</div>";
$(element).bind("click", function(e) {
$scope.showImg = true;
if(angular.element("#shade_div").length>0) {
angular.element("#shade_div").find("img").attr("src", $scope.imgUrl);
angular.element("#shade_div").css('display', "block");
}else
angular.element("body").append($scope.htm);
angular.element("#close_div").bind("click", function(e) {
$scope.showImg = !$scope.showImg;
if(!$scope.showImg)
angular.element("#shade_div").css('display', "none");
});
angular.element("#img_div").bind("click", function(e) {
if($scope.showImg) {
$scope.showImg = !$scope.showImg;
angular.element("#shade_div").css('display', "none");
}
});
});
}
}
})
.directive("imageMagnifier", function() {
"use strict";
return {
restrict:"AC",
scope: {
imgUrl: "@"
},
link: function($scope, element, attrs, controller, transcludeFn) {
angular.element(element).css("cursor", "pointer");
if(!$scope.imgUrl) {
return ;
}
if($scope.imgUrl.indexOf("@")!=-1) {
$scope.imgUrl = $scope.imgUrl.split("@")[0];
}
$scope.htm = "<div id='magnifier_out_div' class='magnifier_out_div'>";
$scope.htm += "<div class='delete_div' id='delete_div'><i class='icon icon-delete' id='delete_id'></i></div>";
$scope.htm += "<div class='img_div'>";
$scope.htm += "<img id='img' src='"+$scope.imgUrl+"' class='img_cl'/>";
$scope.htm += "</div>";
$scope.htm += "</div>";
angular.element(element).bind("click", function(e) {
$scope.showImg = true;
if(angular.element("#magnifier_out_div").length>0) {
angular.element("#magnifier_out_div").find("img").attr("src", $scope.imgUrl);
angular.element("#magnifier_out_div").css('display', "block");
}else {
angular.element("body").append($scope.htm);
}
angular.element("#close_div").bind("click", function(e) {
$scope.showImg = !$scope.showImg;
if(!$scope.showImg)
angular.element("#magnifier_out_div").css('display', "none");
});
angular.element("#img").on("click", function(e) {
if($scope.showImg) {
$scope.showImg = !$scope.showImg;
angular.element("#magnifier_out_div").css('display', "none");
}
});
angular.element("#delete_id").on("click", function(e) {
if($scope.showImg) {
$scope.showImg = !$scope.showImg;
angular.element("#magnifier_out_div").css('display', "none");
}
});
});
}
}
});