首页 文章

无法在Bootstrap中将AngularJS变量传递给div模式？

提问于
浏览 次
0

我正在尝试构建一个图像库，其中任何图像在单击时，在扩展模式框（bootstrap 3）中打开 . 我创建了处理缩略图视图和模态对话作为模板的div，其中使用AngularJS编写的自定义脚本填充值 . 问题是，我无法将值传递给模态对话 . 代码的缩略图部分工作正常，但单击单个图像时，不会从脚本中读取值 . 这是我正在使用的HTML代码：

<div class="isotope-container row grid-space-20">
    <div class="col-sm-6 col-md-3 isotope-item int-design" ng-repeat="photopost in postCntrl.posts">
        <div class="image-box">
            <div class="overlay-container">
                <img ng-src="{{photopost.photoThumbnailSrc}}" class="img-responsive" alt="">
                <a class="overlay" data-toggle="modal" data-target="#project-1">
                    <i class="fa fa-search-plus"></i>
                    <span>{{photopost.photoCategory}}</span>
                </a>
            </div>
            <a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-1">{{photopost.photoSubTitle}}</a>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="project-1" tabindex="-1" role="dialog" aria-labelledby="project-1-label" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="project-1-label">{{photopost.photoCaption}}</h4>
                    </div>
                    <div class="modal-body">
                        <img ng-src="{{photopost.photoSrc}}"/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal end -->
    </div>
</div>

这是使用Angular编写的脚本：

(function(){

    var postGeneratorApp = angular.module('PhotoPostGenerator', []);

    postGeneratorApp.controller('PhotoPostController', function() {

        this.posts = photoposts;
        this.numOfPosts = 20;

    });

    var photoposts = 
        [
            {
                photoCaption: "This is an image",
                photoSubTitle: "Tree",
                photoTimestamp: 'Aug 23, 2015',
                photoCategory: "landscape",
                photoSrc: "../images/gallery/img1.jpg",
                photoThumbnailSrc: "../images/gallery/img1_th.jpg",
            },

            {
                photoCaption: "This is also an image",
                photoSubTitle: "Bird",
                photoTimestamp: 'Sep 23, 2015',
                photoCategory: "bird",
                photoSrc: "../images/gallery/img2.jpg",
                photoThumbnailSrc: "../images/gallery/img2_th.jpg",
            },
           {...} //more entries such as these
         ];

   })();

这就是画廊缩略图的样子（请忽略缩略图上的字幕，它们来自较早的快照）：

enter image description here

点击时，这就是模态对话的样子：

enter image description here

如您所见， Headers 和扩展图像丢失（photoCaption和photoSrc） . 在寻找答案时，我遇到了AngularUI for Bootstrap，但不知道如何使用它，或者是否有一个更简单的修复程序可用于我当前的代码 . 请帮忙！

javascript jquery css angularjs twitter-bootstrap

1 回答

  • 0

    EDIT 1

    看这个：http://jsfiddle.net/mamor/4KBWj/embedded/

    在控制器main中，当开启时，模态使用参数'resolve'来表示conttroler main和modal之间的传递值 . 在模式中使用打开时在modalInstance中传递的name参数 .

    myApp.controller('MainController', ['$scope', '$modal', function ($scope, $modal) {
     $scope.open = function () {
            var modalInstance = $modal.open({
                templateUrl: 'modal.html',
                controller: 'ModalInstanceCtrl',
                resolve: {
                    params: function () {
                        return {
                            key: 'value',
                            key2: 'value2'
                        };
                    }
                }
            });
            modalInstance.result.then(
                function (result) {
                    console.log('called $modalInstance.close()');
                    alert(result);
                },
                function (result) {
                    console.log('called $modalInstance.dismiss()');
                    alert(result);
                }
            );
        };
});

    现在在模态控制器中使用de params来获得主控制器的值 .

    myApp.controller('ModalController', ['$scope', '$modalInstance', 'params', function ($scope, $modalInstance, params) {
    console.log(params); /* This params of MainController */

    $scope.ok = function () {
        $modalInstance.close('this is result for close');
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('this is result for dismiss');
    };
}]);

    EDIT 2

    添加元素调用：“ng-click ='clickedElement = photopost'”

    <div class="image-box">
    <div class="overlay-container">
        <img ng-src="{{photopost.photoThumbnailSrc}}" class="img-responsive" alt="">
        <a class="overlay" ng-click="clickedElement = photopost" data-toggle="modal" data-target="#project-1">
            <i class="fa fa-search-plus"></i>
            <span>{{photopost.photoCategory}}</span>
        </a>
    </div>
    <a class="btn btn-default btn-block" ng-click="clickedElement = photopost" data-toggle="modal" data-target="#project-1">{{photopost.photoSubTitle}}</a>
</div>

    之后，在目标的模态访问metada中使用'clickedElement'来获取数据 .

    <div class="modal-header">
    {{clickedElement}}
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="project-1-label">{{clickedElement.photoCaption}}</h4>
</div>
    回复于

相关问题