Не могу показать модальное изображение заголовка с Angularjs

Question

Не могу показать модальное изображение заголовка с Angularjs

0

У меня проблема с отображением заголовка на модальном изображении.

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

После того, как я запустил свои коды, он не может отображать изображение субтитров на моем модале. Пожалуйста, помогите мне, как показать надпись на моем модальном, когда я нажимаю?

Skripsi Rico 26 июнь 2015, в 05:08

Источник

Теги:

javascript

angularjs

modal-dialog

1 ответ

Ещё вопросы

Phil · Accepted Answer · 2015-06-26T01-13-00.000Z

Я бы упростил это.

Сначала измените тэг <a> на ng-click="open(image)" чтобы вы передавали весь объект, а не только URL-адрес.

Затем, в вашем 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>

@SkripsiRico это в основном то же самое, что мой комментарий выше, поэтому я не уверен, почему это не сработало. В любом случае, пожалуйста