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

Question

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

.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)", чтобы передать весь объект, а не только 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>