Question

我在图片模式上显示标题时出现问题。

    .controller('HomeController',['dataProvider','$scope','$location', '$modal', '$log', 'authService',
    function(dataProvider, $scope, $location,$modal, $log, authService){
        $scope.imageurl = [
            {
                'url': '/uploads/home/tenda kerucut.jpg',
                'thumbUrl': '/uploads/home/tenda kerucut.jpg',
                'caption': 'Tenda Kerucut',
                'size': 'Ukuran 3x3 m, 5x5 m'
            },
            {
                'url': '/uploads/home/tenda konvensional.jpg',
                'thumbUrl': '/uploads/home/tenda konvensional.jpg',
                'caption': 'Tenda Konvensional',
                'size': ''
            }
        ];

        $scope.open = function (item) {
            var modalInstance = $modal.open({
                templateUrl: '/partials/layouts/modal-home.html',
                controller: 'ModalInstanceCtrl',
                resolve: {
                    imageurl: function(){
                        return item;
                    }
                }
            });
        };

        $scope.toggleAnimation = function () {
            $scope.animationsEnabled = !$scope.animationsEnabled;
        };
}])

.controller('ModalInstanceCtrl', function ($scope, $modalInstance, imageurl) {
    $scope.item = imageurl;
});

我的观点

<div class="ui-product-thumbs grid-33" ng-repeat="image in imageurl">
            <a ng-click="open(image.url)">
                <img ng-src="{{image.thumbUrl}}" class="img-thumbnail" alt="">
            </a>
            <div class="ui-product-info">
                <p>{{image.caption}}</p>
                <div class="text-center">{{image.size}}</div>
            </div>
        </div>

这是我的模态

<div class="modal-body">
    <img class="img-full-width" ng-src="{{item}}">
    <p>{{image.size}}</p>
</div>

运行我的代码后，它无法在我的模态上显示字幕图像。请帮助我，当我点击时如何在我的模态上显示标题？

Answer 1

我会对此进行简化。

首先，将您的<a>代码更改为ng-click="open(image)"，这样您就可以传递整个对象，而不仅仅是网址。

然后，在HomeController ...

中

$scope.open = function(image) {
    $modal.open({
        templateUrl: '/partials/layouts/modal-home.html',
        controller: function($scope) {
            $scope.image = image;
        }
    });
};

然后您的模型模板可以引用{{image.url}}，{{image.caption}}和任何其他图像对象属性，例如

<div class="modal-body">
    <img class="img-full-width" ng-src="{{::image.url}}">
    <p>{{::image.caption}}</p>
</div>

无法使用Angularjs显示字幕图像模式

1 个答案: