Angular UI 모달 (라이트 박스 효과)에 데이터 전달

Question

문제 : 나는 Angular UI 부트 스트랩 모달

를 사용하여 모달 라이트 박스를 만들고 싶습니다.

세부 정보 : NG-Repeat를 사용하여 사진 그리드를 만들었습니다. 반복되는 각 사진은 open () 메서드를 사용하여 모달을 엽니 다. 클릭 한 항목의 범위를 모달로 전달하여 이미지 URL을 표시 할 수있는 방법으로 어려움을 겪고 있습니다. 모달에 대한 범위 매개 변수를 구현하여 부모에게 액세스 할 수 있습니다. 그러나 부모는 클릭 된 항목의 상위 범위이며 그리드의 모든 이미지의 전체 배열을 포함합니다. 어떤 색인을 클릭했는지 (프로그래밍 방식으로) 어떤 색인을 보낼 수 있는지 알아 내거나 모달에 자식 범위를 보내야합니다. 나는 뉴욕이나 뭔가를 놓치거나 이것을 접근 할 수있는 더 좋은 방법이 있다면, 도움이 필요합니다.

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

.

인스턴스 및 컨트롤러 :

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);

};

.

이것은 기본적으로 범위가 어떻게 보이는지입니다. 필요한 항목 색인은 깊이 묻혀 있고, 클릭 한 것으로 알려야합니다 (프로그래밍 방식으로). Index [0]

소스 오프가 필요합니다.

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

.

Answer 1

당신은 이렇게 할 수 있습니다.

html

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

.

자바 스크립트

$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)"