Передать аргумент $http через Angular UI Modal

У меня есть список деталей, когда пользователь щелкает значок, я хочу, чтобы он открывал модальное окно, которое извлекает больше данных по этому конкретному аспекту. Я использую директивы начальной загрузки Angular UI.

Мой текущий контроллер выглядит так

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

Модальное окно открывается с помощью кнопки в повторе ng. Это похоже на это:

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

Я хочу передать аргумент, который меняет запрос GET на основе того, какой элемент щелкает пользователь, 101, 102, 103 и т. д. Я думаю, что что-то вроде этого может работать:

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

Из более раннего контроллера:

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

Я считаю, что это сработает, однако должен быть лучший способ. Я сделал все возможное для Google и прочитал документацию по $http и Angular UI.


person Patrick Cauley    schedule 19.12.2013    source источник


Ответы (1)


Я использую dialogService из старого angularUI, и, вероятно, он похож, потому что dialogService был разработан для modalService и теперь содержит функции из. Попробуй это:

  1. Передать идентификатор элемента в функцию open: <a href="" class="btn button" ng-click="open(val.item1);">
  2. Изменить функцию open: $scope.open = function(item) { ... }
  3. Передайте свой идентификатор элемента в качестве аргумента для модального окна. Просто добавьте следующее свойство к объекту, который вы передаете $modal.open, например item: item
  4. Получить этот элемент в модальном контроллере. В контроллере, созданном dialogService, я получаю это так: var myItem = dialog.options.item;
  5. Сделать запрос $http, используя myItem
person Sean Doe    schedule 19.12.2013