Question

我有一个详细信息列表，当用户点击图标时，我希望它打开一个模式，在该特定方面上提取更多数据。我正在使用Angular UI的Bootstrap指令。

我当前的控制器看起来像这样

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>

我想传递一个参数，根据用户点击的项目，101,102,103等更改GET请求的内容。我觉得这样的事情可能有用：

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

我相信这会奏效，但必须有更好的方法。我已尽力为谷歌阅读$ http和Angular UI的文档。

Answer 1

我使用来自旧angularUI的dialogService，它可能类似，因为dialogService是开发给modalService的，现在它包含来自的函数。试试这个：

将商品ID传递给open函数：<a href="" class="btn button" ng-click="open(val.item1);">
修改open功能：$scope.open = function(item) { ... }
将您的项目ID作为参数传递给模态。只需将下一个属性添加到您传递给$modal.open的对象，例如item: item
在模态控制器中检索此项目。在由控制器创建 dialogService我这样得到它： var myItem = dialog.options.item;
使用myItem

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

1 个答案: