2014-11-04 22 views
18

में डेटा पास करें, जब मैं खोला जाता हूं तो मैं कुछ मॉडल डेटा को मोडल विंडो में पास करने की कोशिश कर रहा हूं। जब उपयोगकर्ता किसी तत्व पर क्लिक करता है तो मैं मोडल विंडो खोलना चाहता हूं और क्लिक किए गए से संबंधित अधिक विस्तृत जानकारी प्रदर्शित करना चाहता हूं।कोणीय-यूई मोडल - मोडल

मैंने plunker बनाया है जो काम करता है कि मैं इसे मोडल विंडो में डेटा पास करने के अलावा कैसे करना चाहता हूं।

मैं कर रहा हूँ का उपयोग करने में डेटा पारित करने के लिए कोशिश कर रहा एनजी-क्लिक करें:

<img ng-src="{{item.picture}}" width="100" ng-click="open(item)"/> 

किसी को भी इस के साथ मेरी मदद कर सकते हैं? या मुझे सही दिशा में इंगित करें?

उत्तर

29

कैसे this के बारे में:

$scope.open = function (size) { 

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

और अपने मॉडल नियंत्रक में इस प्रकार का अब समाधान आकार वस्तु शामिल करना सुनिश्चित करें?

मैं संकल्प

resolve: { 
    items: function() { 
     return $scope.items; 
    }, 
    item: function(){ 
     return size; 
    } 
} 

को आइटम जोड़ा और controller में मैं कर रहा हूँ: $scope.item = item;item

13

मैंने आपके लिए http://plnkr.co/FzU5SOv3pdZmAPAIOzdo पर एक प्लंकर बनाया है।

आप अपने डेटा को वर्तमान में हल करना चाहते हैं जैसे आप वर्तमान में आइटम करते हैं।

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, size) { 

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

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

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

क्या मेरे लिए काम किया इंजेक्शन लगाने के बाद resolve है कि एक वस्तु रिटर्न के भीतर एक वस्तु बनाने के लिए था जिसमें वह चर है जो मैं साझा करना चाहता था।

resolve: { 
    shared: function(){ 
    return { 
     name: 'Spencer', 
     numbers: [1, 2, 3] 
    } 
    } 
} 

shared वस्तु का उपयोग करने के लिए, जब अपने मोडल उदाहरण नियंत्रक को परिभाषित यह शामिल हैं।

app.controller('ModalInstanceController', function($scope, shared, $uibModalInstance,
संबंधित मुद्दे