將數據傳遞給角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模式（燈箱效果）

回答

相關問題