Question

我想为照片库创建大胆弹出的指令。创建指令背后的想法是通过hzphoto指令从数据库中获取和显示图库图像，并且可以在指令中使用相同的数据，因此我不需要在数据库中进行第二次调用。

但我可以在hzPhoto中成功获取数据并成功在hzMagnificPopup中创建数据数组，但图像不会显示在模板中。

以下是我的代码。

指令：hzPhotoDirective.js
hzphoto：从数据库中获取所有照片
hzImagepopup：在循环中逐个获取记录并存储在数组中，以后我将用于magnificpopup。数组已成功创建，但图像未显示在模板中。

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

Answer 1

经过2天的努力，我发现了自己的错误并编辑了我的代码。我按照以下方式解决并发布了它，它完全可以创建动态弹出库。

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;
                        }
                    }
                }
            ]);
}());

Photoctrl.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:&nbsp;<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("=============================");
                        }
                    }
                }]);
}());

以上的努力和代码修改解决了我的问题，但我欢迎并欣赏优化的答案。

画廊图像不显示

1 个答案: