Angularjs modal öffnen mit Bild

Hallo ich habe eine Tabelle, in der ich zeigen kann, die links von jedem Bild, das ich hochladen auf dem server. Die links, die ich zeige, ich bekomme Sie von einem json. Dies ist, was ich Tue

       <tbody>
            <tr ng-repeat="wall in walls">
                <td>{{wall.id}}</td>
                <td>{{wall.link}}</td>
                <td><a href="#imdage_modal" data-uk-modal><i class="uk-icon uk-icon-eye"></a></td>
            </tr>
        <tbody>

auf der Dritten Spalte habe ich ein Symbol, das offen sein sollte, ein modales, in dem das Bild von diesem link. Die modal ist dieses:

<!-- Image modal -->
    <div id="imdage_modal" class="uk-modal">
    <div class="uk-modal-dialog">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img ng-src="" alt="">
    </div>

Das problem ist, dass ich nicht weiß, wie das korrekte link in der ng-src des modal. Wie könnte ich es tun?

EDIT:

function($scope, $http) {
        $http.get('https://www.mywebsite.com/images/getimages.php').
          success(function(data, status, headers, config) {
            $scope.walls = data.walls;
            console.log($scope.walls);
         }).error(function(data, status, headers, config) {
            //called asynchronously if an error occurs
            //or server returns response with an error status.
         });

Dies ist das js zu retreive alle Daten aus json (die links in meinem Fall). Wie Sie sehen können, modal öffnen, die ich nicht verwenden Sie eine javascript-Funktion, aber die nutze ich nur html mit uikit Funktionen.

  • Sie können ein Objekt übergeben, um modal mit src in es. mit resolve
  • Können Sie bitte zeigen Sie mir mit dem code?
  • können Sie Ihre javascript-code?
  • Ok, siehe mein edit. Wie ich schon schrieb, ich öffne die modal nicht mit einer Funktion, aber mit html und uikit. Finden Sie die Dokumentation der modalen hier, wenn Sie benötigen: getuikit.com/docs/modal.html vielen Dank!
  • Sie können die Verwendung von bootstrap modal
  • sorry, war Weg. ich Frage mich. wenn dies alle html -, dann müssen Sie Zugang zu scope über.

InformationsquelleAutor End.Game | 2015-05-17
  1. 2

    Hier ist eine bessere Lösung, die mithilfe von UI-Bootstrap 3:

    controller.js :

    $scope.openModalImage = function (imageSrc, imageDescription) {
  $modal.open({
    templateUrl: "path/to/modalImage.html",
    resolve: {
        imageSrcToUse: function () {
            return imageSrc;
        },
        imageDescriptionToUse: function () {
            return imageDescription;
        }
    },
    controller: [
      "$scope", "imageSrcToUse", "imageDescriptionToUse",
        function ($scope, imageSrcToUse, imageDescriptionToUse) {
            $scope.ImageSrc = imageSrcToUse;
            return $scope.ImageDescription = imageDescriptionToUse;
      }
    ]
 });
};

    modalImage.html:

    <div class="modalImage">
  <div class="modal-header">{{selectedImg.header}} 
     <button ng-click="$dismiss()" class="close pull-right" 
             aria-hidden="true">&times;</button>
     <div class="clearfix"></div>
  </div>
  <div class="modal-body">
     <div class="image-wrapper">
        <a ng-href="{{ImageSrc}}" target="_blank">
           <img ng-src={{ImageSrc}}>
        </a>
     </div>
     <div class="text-muted image-description">{{ImageDescription}}
     </div>
 </div>
</div>

    Stil.css:

    .modalImage .image-wrapper {
   text-align: center;
 }
.modalImage .image-wrapper img {
   max-width: 560px;
   max-height: 560px;
}
.modalImage .image-description {
  text-align: center;
  margin-top: 10px;
}

    view.html:

    <img ng-src="{{image-1-source}}"
     alt="{{image-1-name}}"
     ng-click="openModalImage(image-1-source, image-1-name)">
    InformationsquelleAutor Yaro
  2. 1

    dein Ansatz ist falsch modal öffnen

    Folgen Sie bitte folgenden link

    https://angular-ui.github.io/bootstrap/

    Suchbegriff - Modal (ui.bootstrap.modal)

    können Sie pass Wert modal mit 'auflösen' code überprüfen modal öffnen

    InformationsquelleAutor
Schreibe einen Kommentar