У меня есть список деталей, когда пользователь щелкает значок, я хочу, чтобы он открывал модальное окно, которое извлекает больше данных по этому конкретному аспекту. Я использую директивы начальной загрузки 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.