将数据传递给角UI模式（灯箱效果）

问题： 我想用角UI引导模式将数据传递给角UI模式（灯箱效果）

详情创建模式收藏： 我已经建立了使用NG重复一个照片网格。每个重复的照片使用open（）方法打开模式。我正在努力如何将点击项目的范围传递给模式，以便我可以抓取要显示的图像网址。我已经在模态上实现了scope参数，这使我可以访问父级;但是，父项是所单击项目的父范围，并包含网格中所有图像的整个数组。我需要弄清楚如何告诉（以编程方式）已经点击了哪个索引，或只发送子范围到模态。我是一个新手......如果我错过了某些东西，或者有更好的方法来解决这个问题，欢迎任何帮助。

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

};

这基本上是范围的外观。我需要的项目索引被深埋，我需要知道（以编程方式）哪个被点击。我需要关闭来源索引[0]

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

来源

2014-02-27 Kram62

你可以做这样的事情。

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

来源

2014-02-27 03:55:01 rob

这样做...从功能中删除$范围！谢谢你指出。你知道为什么$ scope不是必需的吗？我会认为任何对scope属性的引用都需要$ scope – Kram62

@ user2679704你正在打开open函数参数中的'photo'。并且你正在ng中点击html中的照片。整个控制器只有一个范围是将特定照片放在$范围内并不合理。 – rob

这与MightySchmoePong指出的基本相同的解决方案 – rob

难道你不能把照片打开吗？即ng-click =“open（photo）”

来源

2014-02-27 03:51:54 MightySchmoePong

感谢您的回答。但是，我尝试过，但它返回为未定义。 – Kram62

你是以第一个参数来做还是你还在那里？即$ scope.open = function（phone）{} vs. $ scope.open = function（scope，phone）{} – MightySchmoePong

我作为第一个函数申请$ scope.open = function（phone）{}。但显然改变返回声明返回$ scope.photo返回照片;诀窍。虽然我不太清楚为什么。我会认为任何对范围的引用都需要$ scope。 – Kram62

我试图张贴此作为一个评论，但显然为时已久。所以，即使给出了正确的答案，我也会将它作为答案发布。

如果你的定义是

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

那么你的决心是

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

你刚刚困惑，因为你已经使用的字符串名称“照片”为你的函数的参数。它与范围无关。另外，在你的决心定义，你可以把它叫做什么，而不是照片

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

，然后在

ModelInstanceCtrl(... , abc)

再次使用ABC，没有链接范围在这里。你只是沿着一个值传递从

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

内，你可以将其设置为任何控制器，你想

$scope.xxx = abc;

照片其实并不在主要范围，因为NG-重复存在，创建一个本地循环内的范围。照片仅在循环内可见，这就是为什么您必须通过函数open（）参数传递给控制器的原因。我是Angular的新手，并且追踪范围生活一直具有挑战性。那里的专家，如果我错了，请纠正我。

来源

2014-02-28 02:18:15

是的，谢谢你这个伟大的解释！ – Kram62

将数据传递给角UI模式（灯箱效果）

回答

相关问题