将参数传递给$ http通过Angular UI Modal获取

Question

I have a list of details, when a user clicks an icon I want it to open a modal that pulls more data on that specific facet. I'm using Angular UI's Bootstrap Directives.

My current controller looks like this

controller('orderCtrl', function($scope, $modal, $http){

var orderModalCtrl = function ($scope, $modalInstance, $http, orders){
        $http.get('json/SI1.json').success(function(data){
            $scope.orders = data;
        });         
    };

$http.get('json/current.json').success(function(data){
    $scope.topLevelOverview = data;         
});

$scope.open = function() {
        $('body').css('overflow', 'hidden');
        var modalInstance = $modal.open({
            templateUrl: 'template/modal/orderModal.html',
            windowClass: 'contactModal',
            controller: orderModalCtrl,
            backdrop : 'static',
            resolve:{
                orders: function (){                        
                    return $scope.orders;
                }
            }
        });

        modalInstance.result.then(function (){
            $('body').css('overflow', 'scroll');
        }, function(){
            $('body').css('overflow', 'scroll');
        });
    };
});

The modal is opened from a button in an ng repeat. That looks similar to this:

 <div ng-repeat="(key,overview) in order.orderDetails">
  <div class="row" ng-repeat="(key, val) in overview.snippet">
    <div class="span2"><p>{{val.item1}}</p></div>
    <div class="span3"><p>{{val.item2}}</p></div>
    <div class="span3"><p>{{val.qty}}</p></div>
    <div class="span3"><p>{{val.freq | capitalize}}</p></div>
    <div class="span1"><a href="" class="btn button" ng-click="open();">
            <i class="fa fa-file-text fa-2x"></i></a></div>
  </div>
</div>

I want to pass an argument that changes what the GET request is based on which item the user clicks, 101, 102, 103 etc. I think something like this might work:

 <div class="span1"><a href="" class="btn button" ng-click="open(); routeTo({{val.item1}});">
            <i class="fa fa-file-text fa-2x"></i></a></div>

From the earlier controller:

 var orderModalCtrl = function ($scope, $modalInstance, $http, orders){
       $scope.routeTo = function(route){                  
    $http.get('json/'+route+'.json').success(function(data){
        $scope.orders = data;
    });         
};
 };

I believe this would work however there has to be a better way. I've done my best to Google and read through the documentation for $http and Angular UI.

Answer 1

I use dialogService from old angularUI and it is probably similar because dialogService was developed to modalService and it now contains functions from. Try this:

1. Pass item id to open function: <a href="" class="btn button" ng-click="open(val.item1);">
2. Modify open function: $scope.open = function(item) { ... }
3. Pass your id of item as argument to the modal. Just add next property to object which you pass to $modal.open , for example item: item
4. Retrieve this item in modal controller. In controller created by dialogService I get it this way: var myItem = dialog.options.item;
5. Make $http request using myItem