画廊图像未显示
Gallery image is not display
我想为照片库创建放大弹出指令。我创建指令背后的想法是，通过hzphoto指令从数据库中获取并显示图库图像，并且相同的数据可以在指令中使用，所以我不需要在数据库中进行第二次调用。
但我可以在hzPhoto中成功获取数据，并在hzMagnificPopup中成功创建数据数组，但图像没有显示在模板中。
以下是我的代码。
指令：hzPhotoDirective.js
hzphoto：从数据库获取所有照片
hzImagepopup：在循环中一个接一个地获取记录并存储在数组中，以便稍后我将用于amplifcpopup。阵列已成功创建，但图像未显示在模板中。
(function () {
'use strict';
angular
.module("AppSigma")
.directive("hzPhoto", [function () {
return{
restrict: "E",
replace: false,
template: "<div class='"total_album_photo gallery'" ng-repeat='"photo in list'"></div>",
scope: {
list: "="
},
link: function (scope, element, attrs) {
console.log("scope list in hzpohot");
console.log(scope);
}
}
}])
.directive('hzImagePopup', ["$rootScope", function ($rootScope) {
var arrData = [];
return{
restrict: "E",
//replace: true,
// template: "'n'
// <div class='"no_of_photo imgWrapper'">'n'
// <a href='"javascript:void(0);'" class='"popup-link'" data-index='"2'" data-ref='"{{photo.photo_name}}'" data-module='"photo'">'n'
// <img ng-src='"/resize/photo/{{photo.photo_name}}'" height='"120'" width='"120'"/>'n'
// </a>'n'
// </div>'n'
//",
scope: {
list: "=",
link: "@"
},
compile: function (element, attrs) {
return{
pre: function (scope, element, attrs) {
console.log(scope.link);
var originalImage_img = scope.link + "/" + scope.list.photo_name;
arrData.push({originalImage_img: originalImage_img});
console.log(arrData);
}
}
}
}
}])
.directive('hzImagePopup1', ["$rootScope", "HzPhotoService", function ($rootScope, HzPhotoService) {
return{
restrict: "A",
scope: {
list: "="
},
compile: function (element, attrs) {
return{
pre: function (scope, element, attrs) {
var module = 'photo';
var data = [
{originalImage_img: "/photo/2e94ab78daa337e448880d71250c4ec6.png"},
{originalImage_img: "/photo/American-Brides-jewelry-Set-2015-Collection-For-Hot-Girls-3.jpg"},
{originalImage_img: "/photo/cda82455689274565b94de46dc08d486.jpg"}
];
var totalImage = data.length;
angular.forEach(angular.element(".imgWrapper > a"), function (val, key) {
console.log("index:" + angular.element(".popup-link").eq(key).data("index"));
angular.element(".popup-link").eq(key).magnificPopup({
key: 'my-popup',
items: data,
index: key,
type: 'inline',
verticalFit: true, // Fits image in area vertically
inline: {
// Define markup. Class names should match key names.
markup: "'n'
<form class='"white-popup-block ng-pristine ng-valid ng-scope'" id='"dataPopup'">'n'
<div class='"popup_heading'">Photo 1 of 3</div>'n'
<div id='"img_center'">'n'
<img style='"width:100%'" src='"'" id='"img_center_content'" class='"mfp-originalImage'">'n'
</div>'n'
<button class='"mfp-close'" type='"button'" title='"Close (Esc)'">×</button>'n'
</form>'n'
"
},
gallery: {
enabled: true
},
callbacks: {
open: function () {
},
change: function () {
},
markupParse: function (template, values, item) {
// optionally apply your own logic - modify "template" element based on data in "values"
// console.log('Parsing:', template, values, item);
},
elementParse: function (item) {
}
}
});
});
}
}
},
link: function (scope, element, attrs) {
console.log("photoloads");
console.log($rootScope.photos);
}
};
}
]);
}());
PhotoCtrl.js
(function () {
'use strict';
/**
* Photo Controller for photo features
* @param {type} $scope
* @returns {undefined}
*/
function PhotoCtrl($scope, $state, HzServices) {
/**
* Lists available albums of user
* @returns {undefined}
*/
$scope.doAlbumList = function () {
var data = {params: {q: $state.params.pid}};
var deferred = HzServices.deferred("/api/album/list", data);
deferred.then(
function (res) {
$scope.albums = res.data.album;
$scope.albumsCount = res.data.album.length;
$scope.photos = res.data.photo;
$scope.photosCount = res.data.photo.length;
},
function (res) {
$scope.albums = {};
$scope.albumsCount = 0;
$scope.photos = {};
$scope.photosCount = 0;
});
};
$scope.doGetPhoto = function () {
return [{photos: $scope.photos, photoCount: $scope.photoCount}];
}
angular
.module("AppSigma")
.controller('PhotoCtrl', ['$scope', '$state', 'HzServices', PhotoCtrl]);
}());
Photo.html
<div class="total_album_photo gallery" ng-repeat="photo in photos track by $index">
<hz-image-popup list="photo" link="photo" data-index="{{$index}}"></hz-image-popup>
</div>
经过两天的努力，我发现了错误，并编辑了代码。我按照下面的方法解决了这个问题，它非常适合创建动态弹出库。
photo.html
/*
* To create directive for loop through all gallery photos.
*/
<div class="total_album_photo_gallery">
<hz-media-list photos="photos"></hz-media-list>
</div>
photoList.html
/*
* Here I can loop through all photos and display thumbnails of photos,
* ng-repeat-start and ng-repeat-stop to call directive in last photo,
* so it will not call directive through all photos loop
*/
<div>
<div class="total_album_photo gallery" ng-repeat-start="photo in photos track by $index">
<div class="no_of_photo imgWrapper">
<a href="javascript:void(0);" class="popup-link" data-index="{{$index}}">
<img ng-src="/resize/photo/{{photo.photo_name}}" height="120" width="120"/>
</a>
</div>
</div>
/*
* Create magnific popup directive to show photo gallery it will fetch photos directly.
*/
<div ng-repeat-end=""><hz-photo-popup></hz-photo-popup></div>
</div>
HzPhotoService.js
/*
* Create services to share common data to all directives.
*/
(function () {
'use strict';
angular
.module("AppSigma")
.factory("HzPhotoService", ['$rootScope', '$state', 'HzServices',
function ($rootScope, $state, HzServices) {
//$scope.sharedData = [];
return {
getPhotoData: function () {
var data = {params: {q: $state.params.pid}};
return HzServices.deferred("/api/album/list", data);
},
setSharedData: function (data) {
$rootScope.sharedData = data;
},
getSharedData: function () {
return $rootScope.sharedData;
}
}
}
]);
}());
Photocttrl.js
(function () {
'use strict';
/**
* Photo Controller for photo features
* @param {type} $scope
* @returns {undefined}
*/
function PhotoCtrl($rootScope, $scope, $state, HzServices, HzPhotoService) {
/**
* Lists available albums of user
* @returns {undefined}
*/
$scope.doAlbumList = function () {
var data = {params: {q: $state.params.pid}};
var deferred = HzServices.deferred("/api/album/list", data);
deferred.then(
function (res) {
var data = {album: {count: res.data.album.length, data: res.data.album}, photo: {count: res.data.photo.length, data: res.data.photo}};
HzPhotoService.setSharedData(data);
$scope.albums = $rootScope.sharedData.album.data;
$scope.albumsCount = $rootScope.sharedData.album.count;
$scope.photos = $rootScope.sharedData.photo.data;
$scope.photosCount = $rootScope.sharedData.photo.count;
},
function (res) {
$scope.albums = {};
$scope.albumsCount = 0;
$scope.photos = {};
$scope.photosCount = 0;
var data = {album: {count: $scope.albumsCount, data: $scope.albums}, photo: {count: $scope.photosCount, data: $scope.photos}};
HzPhotoService.setSharedData(data);
}
);
}
}
angular
.module("AppSigma")
.controller('PhotoCtrl', ['$rootScope', '$scope', '$state', 'HzServices', 'HzPhotoService', PhotoCtrl]);
}());
HzDirective.js
(function () {
'use strict';
angular
.module("AppSigma")
.directive("hzMediaList", [function () {
/*
* Photo thumbnail listing directive
*/
return {
restrict: "AE",
replace: true,
templateUrl: "/views/photo/photoList.html",
scope: {
photos: "="
}
}
}])
.directive("hzPhotoPopup", ["HzPhotoService", function (HzPhotoService) {
/*
* Magnific Popup directive
*/
return {
restrict: "AECM",
replace: true,
scope: true,
compile: function (scope, element) {
return{
pre: function (scope, element, attrs) {
if (scope.$last) {
var media = HzPhotoService.getSharedData();
var arrData = [];
angular.forEach(media.photo.data, function (value, key) {
arrData.push({originalImage_img: "/photo/" + value.photo_name});
});
angular.forEach(angular.element(".gallery > .imgWrapper > a"), function (val, key) {
angular.element(".popup-link").eq(key).magnificPopup({
key: 'my-popup',
items: arrData,
index: key,
type: 'inline',
verticalFit: true, // Fits image in area vertically
inline: {
// Define markup. Class names should match key names.
markup: "'n'
<form class='"white-popup-block ng-pristine ng-valid ng-scope'" id='"dataPopup'">'n'
<div class='"popup_heading'">Photo</div>'n'
<div id='"img_center'">'n'
<img style='"width:100%'" src='"'" id='"img_center_content'" class='"mfp-originalImage'">'n'
</div>'n'
<div class='"popup_main'">'n'
<div class='"popup_left photo_popup_left'">'n'
<div class='"popup_raw1'">'n'
<div class='"popup_raw1_left'">'n'
<div class='" location'">Location: <span>Ahmedabad</span></div>'n'
<div class='"comment_link'">'n'
<ul>'n'
<li><a href='"#'"><i class='"fa fa-heart'"></i>Like</a></li>'n'
</ul>'n'
</div>'n'
</div>'n'
<div class='"popup_raw1_right'">'n'
<div class='"latest-review-time'">3 months ago</div>'n'
<div class='"clear'"></div>'n'
<div class='"latest-review-time'">'n'
<div class='"mgmenu_fixed mgmenu1'" id='"mgmenu1'">'n'
<!-- Begin Mega Menu Container -->'n'
<ul ng-show='"isAuth'" class='"mgmenu'">'n'
<!-- Begin Mega Menu -->'n'
<li class='"username-menu'">'n'
<div class='"user_img_div'">'n'
<a style='"padding-right:0px'" href='"#'"><img src='"images/dotimg.png'"></a>'n'
</div>'n'
<!-- Begin Item -->'n'
<div class='"dropdown_container user_menu_list_div dotmenu'">'n'
<!-- Begin Item Container -->'n'
<ul class='"arrow_box_menu'">'n'
<li><a href='"#'"><i class='"fa fa-pencil'"></i>Edit</a></li>'n'
<li><a href='"#'"><i class='"fa fa-trash'"></i>Delete</a></li>'n'
</ul>'n'
</div>'n'
<!-- End Item Container -->'n'
</li>'n'
</ul>'n'
<!-- End Mega Menu -->'n'
</div>'n'
</div>'n'
</div>'n'
</div>'n'
<div class='"comment'">'n'
<div class='"comment_list_main'">'n'
<div class='"comment_list'">'n'
<div class='"comment_list_img'">'n'
<img src='"images/latest-review-img.png'">'n'
</div>'n'
<div class='"comment_list_detail'">'n'
<div class='"latest-review-right-row'">'n'
<div class='"latest-review-left-name'">'n' John Smith @johns'n'
</div>'n'
<div class='"latest-review-time'">2 min ago</div>'n'
</div>'n'
<div class='"latest-review-right-row'">'n'
<div class='"latest-review-time'">'n'
<div class='"mgmenu_fixed mgmenu1'" id='"mgmenu1'">'n'
<!-- Begin Mega Menu Container -->'n'
<ul class='"mgmenu'">'n'
<!-- Begin Mega Menu -->'n'
<li class='"username-menu'">'n'
<div class='"user_img_div'">'n'
<a style='"padding-right:0px'" href='"#'"><img src='"images/dotimg.png'"></a>'n'
</div>'n'
<!-- Begin Item -->'n'
<div class='"dropdown_container user_menu_list_div dotmenu'">'n'
<!-- Begin Item Container -->'n'
<ul class='"arrow_box_menu'">'n'
<li><a href='"#'"><i class='"fa fa-pencil'"></i>Edit</a></li>'n'
<li><a href='"#'"><i class='"fa fa-trash'"></i>Delete</a></li>'n'
</ul>'n'
</div>'n'
<!-- End Item Container -->'n'
</li>'n'
</ul>'n'
<!-- End Mega Menu -->'n'
</div>'n'
</div>'n'
</div>'n'
<div class='"latest-review-text'"> What a hidden foodie haven! The ambiance is a relaxed with chic decor and healthy atmosphere. <a href='"#'"> More (+) </a></div>'n'
<div class='"comment_link'">'n'
<ul>'n'
<li><a href='"#'"><i class='"fa fa-heart'"></i>Like</a></li>'n'
<li><a href='"#'"><i class='"fa fa-share-alt'"></i>Share</a></li>'n'
</ul>'n'
</div>'n'
</div>'n'
</div>'n'
<div class='"comment_list'">'n'
<div class='"comment_list_img'">'n'
<img src='"images/latest-review-img.png'">'n'
</div>'n'
<div class='"comment_list_detail'">'n'
<div class='"latest-review-right-row'">'n'
<div class='"latest-review-left-name'">'n' John Smith @johns'n'
</div>'n'
<div class='"latest-review-time'">2 min ago</div>'n'
</div>'n'
<div class='"latest-review-right-row'">'n'
<div class='"latest-review-time'">'n'
<div class='"mgmenu_fixed mgmenu1'" id='"mgmenu1'">'n'
<!-- Begin Mega Menu Container -->'n'
<ul class='"mgmenu'">'n'
<!-- Begin Mega Menu -->'n'
<li class='"username-menu'">'n'
<div class='"user_img_div'">'n'
<a style='"padding-right:0px'" href='"#'"><img src='"images/dotimg.png'"></a>'n'
</div>'n'
<!-- Begin Item -->'n'
<div class='"dropdown_container user_menu_list_div dotmenu'">'n'
<!-- Begin Item Container -->'n'
<ul class='"arrow_box_menu'">'n'
<li><a href='"#'"><i class='"fa fa-flag'"></i>Report</a></li>'n'
</ul>'n'
</div>'n'
<!-- End Item Container -->'n'
</li>'n'
</ul>'n'
<!-- End Mega Menu -->'n'
</div>'n'
</div>'n'
</div>'n'
<div class='"latest-review-text'"> What a hidden foodie haven! The ambiance is a relaxed with chic decor and healthy atmosphere. <a href='"#'"> More (+) </a></div>'n'
<div class='"comment_link'">'n'
<ul>'n'
<li><a href='"#'"><i class='"fa fa-heart'"></i>Like</a></li>'n'
<li><a href='"#'"><i class='"fa fa-share-alt'"></i>Share</a></li>'n'
</ul>'n'
</div>'n'
</div>'n'
</div>'n'
<div class='"comment_list'">'n'
<div class='"comment_list_img'">'n'
<img src='"images/latest-review-img.png'">'n'
</div>'n'
<div class='"comment_list_detail'">'n'
<div class='"latest-review-right-row'">'n'
<div class='"latest-review-left-name'">'n' John Smith @johns'n'
</div>'n'
<div class='"latest-review-time'">2 min ago</div>'n'
</div>'n'
<div class='"latest-review-right-row'">'n'
<div class='"latest-review-time'">'n'
<div class='"mgmenu_fixed mgmenu1'" id='"mgmenu1'">'n'
<!-- Begin Mega Menu Container -->'n'
<ul class='"mgmenu'">'n'
<!-- Begin Mega Menu -->'n'
<li class='"username-menu'">'n'
<div class='"user_img_div'">'n'
<a style='"padding-right:0px'" href='"#'"><img src='"images/dotimg.png'"></a>'n'
</div>'n'
<!-- Begin Item -->'n'
<div class='"dropdown_container user_menu_list_div dotmenu'">'n'
<!-- Begin Item Container -->'n'
<ul class='"arrow_box_menu'">'n'
<li><a href='"#'"><i class='"fa fa-flag'"></i>Report</a></li>'n'
</ul>'n'
</div>'n'
<!-- End Item Container -->'n'
</li>'n'
</ul>'n'
<!-- End Mega Menu -->'n'
</div>'n'
</div>'n'
</div>'n'
<div class='"latest-review-text'"> What a hidden foodie haven! The ambiance is a relaxed with chic decor and healthy atmosphere. <a href='"#'"> More (+) </a></div>'n'
<div class='"comment_link'">'n'
<ul>'n'
<li><a href='"#'"><i class='"fa fa-heart'"></i>Like</a></li>'n'
<li><a href='"#'"><i class='"fa fa-share-alt'"></i>Share</a></li>'n'
</ul>'n'
</div>'n'
</div>'n'
</div>'n'
</div>'n'
<div class='"comment_box'">'n'
<div class='"comment_input'">'n'
<textarea style='"height: 76px;'" class='"submitByEnter commentarea'" placeholder='"Comment'"></textarea>'n'
</div>'n'
<div class='"comment_att'">'n'
<div class='"comment_btn'">'n'
<input type='"button'" value='"Comment'" class='"submit-btn button '"> </div>'n'
<div class='"latest-review-time'">'n'
<div class='"mgmenu_fixed mgmenu1'" id='"mgmenu1'">'n'
<!-- Begin Mega Menu Container -->'n'
<ul ng-show='"isAuth'" class='"mgmenu'">'n'
<!-- Begin Mega Menu -->'n'
<li class='"username-menu'">'n'
<div class='"user_img_div'"><a href='"#'">Attach</a></div>'n'
<!-- Begin Item -->'n'
<div class='"dropdown_container user_menu_list_div dotmenu'">'n'
<!-- Begin Item Container -->'n'
<ul class='"arrow_box_menu'">'n'
<li><a href='"#'"><i class='"fa fa-pencil'"></i>Edit</a></li>'n'
<li><a href='"#'"><i class='"fa fa-trash'"></i>Delete</a></li>'n'
</ul>'n'
</div>'n'
<!-- End Item Container -->'n'
</li>'n'
</ul>'n'
<!-- End Mega Menu -->'n'
</div>'n'
</div>'n'
</div>'n'
</div>'n'
</div>'n'
</div>'n'
<div class='"popup_right photo_popup_right'">'n'
<div class='"user_detail_left'">'n'
<div class='"user_detail_img'">'n'
<a href='"#'"><img class='"b4 border_none'" src='"images/user_photo.jpg'"></a>'n'
</div>'n'
<div class='"user_detail_name'">'n'
<a href='"#'">'n'
<span class='"header-full-name'">John Smith <br></span>'n'
<span class='"feature_header_username'">@john</span>'n'
</a>'n'
</div>'n'
</div>'n'
<div>'n'
<ul class='"popup_menu'">'n'
<li><a href='"'">Share</a></li>'n'
<li>'n'
<div class='"mgmenu_fixed mgmenu1'" id='"mgmenu1'">'n'
<!-- Begin Mega Menu Container -->'n'
<ul class='"mgmenu'">'n'
<!-- Begin Mega Menu -->'n'
<li style='"border-left:0px'" class='"username-menu'">'n'
<div class='"user_img_div'"><a style='" color:#555555 !important'" href='"#'">Actions</a></div>'n'
<!-- Begin Item -->'n'
<div class='"dropdown_container user_menu_list_div dotmenu'">'n'
<!-- Begin Item Container -->'n'
<ul class='"arrow_box_menu'">'n'
<li><a style='" padding: 5px 10px;'" href='"#'"><i class='"fa fa-pencil'"></i>Edit</a></li>'n'
<li><a style='" padding: 5px 10px;'" href='"#'"><i class='"fa fa-trash'"></i>Delete</a></li>'n'
</ul>'n'
</div>'n'
<!-- End Item Container -->'n'
</li>'n'
</ul>'n'
<!-- End Mega Menu -->'n'
</div>'n'
</li>'n'
<li><a href='"'">Remove</a></li>'n'
<li><a href='"'">Open Original</a></li>'n'
</ul>'n'
</div>'n'
</div>'n'
</div>'n'
<div class='"video_main'">'n'
</div>'n'
<button class='"mfp-close'" type='"button'" title='"Close (Esc)'">×</button>'n'
</form>'n'
"
},
gallery: {
enabled: true
},
callbacks: {
open: function () {
},
change: function () {
},
markupParse: function (template, values, item) {
// optionally apply your own logic - modify "template" element based on data in "values"
// console.log('Parsing:', template, values, item);
},
elementParse: function (item) {
}
}
});
});
}
}
}
}
,
link: function (scope, element, attrs) {
console.log("Shared data in link");
var sharedData = HzPhotoService.getSharedData();
console.log(sharedData);
console.log("=============================");
}
}
}]);
}());
以上的努力和代码修改解决了我的问题，但我欢迎并感谢优化的答案。
相关文章：
- 使用JSP从服务器检索和显示图像
- Windows8应用程序(html&Javascript）:从图片库(除了文件选择器）显示图像的另一种方式
- 使用FormData上传AJAX图像;t在服务器端显示图像
- 选择文件后显示图像
- Chrome(webkit?）无法在幻灯片中正确显示图像
- 如何使用javascript显示图像
- 使用JS按顺序显示图像，而不是随机显示
- 使用服务器上的HTML/js在网页上显示图像
- 我想在选择输入文件上显示图像
- Javascript:单击单选按钮时显示图像
- 如何将JSON结果设置为'src'共'img'以在ASP.NET MVC4中显示图像
- 无法在cakepp布局中显示图像
- 页面加载后通过javascript显示图像
- 将图像文件存储在猫鼬模式中的二进制数据中，并以html形式显示图像
- 使用AngularJs数据绑定的三元运算符显示图像
- 加载时画布上未显示图像
- 运行POST时显示图像
- NodeJS上没有显示图像
- 从Javascript在表中显示图像
- 如何在MVC5中运行时在HTML5 Canvas中显示图像
