Passer des données sur un mode d'interface utilisateur angulaire (effet de la boîte de lumière)

Question

problème: Je souhaite créer une boîte de lumière modale à l'aide du mode de bootstrap UI angulaire

Détails: J'ai construit une grille photo en utilisant ng-répéter. Chaque photo répétée ouvre la méthode modale à l'aide de la méthode Open (). Je me débats avec la manière de transmettre la portée de l'élément cliqué sur le modal afin que je puisse saisir l'URL d'image à afficher. J'ai mis en place le paramètre de portée sur le modal, qui me donne accès au parent; Cependant, le parent est la portée des parents de l'élément cliqué et contient l'ensemble de toutes les images de la grille. Je dois savoir comment savoir (programmatiquement) quel index a été cliqué ou envoyer uniquement la portée de l'enfant au modal. Je suis un débutant ... si je manque quelque chose ou qu'il y a une meilleure façon de m'approcher, toute aide est la bienvenue.

mon HTML:

<section ng-controller="ModalDemoCtrl">
  <div ng-repeat="photo in photos.data">

    <img src="{{photo.source}}" class="thumbnail img-responsive" ng-click="open()">

  </div>
</section>

instance et contrôleur:

app.controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function (scope) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      scope: $scope,
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        },
// this returns as undefined
        photo: function(){
            return $scope.photo;
        }
      }
    });


    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});


var ModalInstanceCtrl = function ($scope, $modalInstance, items, photo) {



  $scope.items = items;
  $scope.photo = photo;
  $scope.selected = {
    item: $scope.items[0]
  };


  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };


  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
  console.log($scope);

};

Ceci est fondamentalement la lecture de la portée. L'indice d'article dont j'ai besoin est enterré de profondeur et je dois savoir (programmatiquement) lequel a été cliqué. J'ai besoin de l'index Source Off [0]

$scope
--$parent
---$parent
----$photos
-----$$v
------data
-------0
--------Source
-------1
-------2
-------3
-------4
-------5
-------6
-------7
-------8

Answer 1

Vous pouvez juste faire quelque chose comme ça.

html

<img src="{{photo.source}}" class="thumbnail img-responsive" ng-click="open(photo)">

JavaScript

$scope.open = function (photo) {

  var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    scope: $scope,
    controller: ModalInstanceCtrl,
    resolve: {
      items: function () {
        return $scope.items;
      },

      photo: function(){
          return photo;
      }
    }
});

Answer 2

I tried to post this as a comment but apparently it's too long. So, I will post it as an answer even though the correct answers have been given.

If your definition was

$scope.open = function (xyz) {...

then your resolve would be

...photo: function(){ return xyz;}

You just got confused because you had used string name 'photo' as your function parameter. It has nothing to do with the scope. Also in your resolve definition, you could have called it anything instead of photo

...abc: function() {return xyz} 

and then use abc in your

ModelInstanceCtrl(... , abc)

Again, there is no link to scope here. You are just passing along a value from

open(photo) to function (xyz) to ModalInstanceCtrl (... , abc)

Within the controller you can set it to anything you would like

$scope.xxx = abc;

photo actually does not exist in the main scope since ng-repeat creates a local scope within the loop. photo is only visible within the loop and that's why you have to pass along to the controller through the function open() parameter. I am new to Angular and keeping track of scope lives has been challenging. Experts out there, please correct me if I am wrong.

Answer 3

Can't you just pass the photo into open? I.e. ng-click="open(photo)"