Getting Multiple Angular Modals To Work With Http Response Data
Solution 1:
$uibModal.open
can accept resolve
parameters, and you can pass parameter like pageData
, resolving it with data received from server. E.g.
$uibModal.open({
templateUrl: ..,
controller: 'modalCtrl',
resolve: {
pageData: function () {
return$http.get(..).then(function (response) {
return response.data;
});
}
}
});
..
// then inject it in your modal controller
myapp.controller('modalCtrl', ['$scope', 'pageData', function ($scope, pageData) {
$scope.pageData = pageData;
}])
Solution 2:
Step 1. Put the required script tags in your HTML
<scriptsrc="scripts/angular.min.js"></script><scriptsrc="scripts/ui-bootstrap.js"></script><scriptsrc="scripts/ui-bootstrap-tpls.min.js"></script>
angular.min.js
is the main Angular library; ui-bootstrap.js
is the Angular UI bootstrap library; ui-bootstrap-tpls.min.js
is the Angular templating script to make the modal template display properly.
Step 2. Put the modal template in your HTML, inside your ng-app div
<divrole="main"id="main"class="ui-content scroll"ng-app="myApp"><!--MODAL WINDOW for item details --><scripttype="text/ng-template"id="itemModalContent.html"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="cancel right button"data-dismiss="modal"aria-hidden="true"ng-click="cancel()"><iclass="fa fa-close"></i></button><spanclass="item-name">{{item.name}}</span></div><divclass="modal-body"><p>{{item.description}}</p></div><divclass="modal-footer"><buttontype="button"class="button cancel btn-default"data-dismiss="modal"ng-click="cancel()">Cancel</button><buttontype="button"class="button ok btn-primary"ng-click="ok()">Sign me up</button></div></div></div></script></div>
Step 3. In your myApp.js, add the modal instance controller
myApp.controller('myItemsModalInstanceCtrl', function ($scope, $uibModalInstance, item) {
$scope.item = item;
$scope.cancel = function () {
$uibModalInstance.close();
$('.overlay').hide();
};
});
Step 4. Call the modal instance controller from the item controller
myApp.controller('myItemsCtrl', function ($scope, $http, $uibModal) {
url = concatUrl + 'local_servicename_ws_function_name';
$http.get(url).then(function (response) {
$scope.items = response.data;
$scope.open = function (item) {
$('.overlay').show();
var modalInstance = $uibModal.open({
controller: "myItemsModalInstanceCtrl",
templateUrl: 'myItemModalContent.html',
resolve: {
item: function () {
return item;
}
}
});
};
})
});
Step 5. Add a button to trigger the modal
This goes inside the ng-repeat
block
<adata-toggle="modal"ng-click="open(item)">{{item.name}}</a>
Additional notes
Put the modal template script inside the ng-app
div, but outside the ng-repeat
block.
This works with multiple modal calls inside a ng-repeat
block, AND with multiple ng-repeat
blocks and modal templates in a page. You do need to make sure that the ng-repeat
block repeats item in items
, and that the modal template references item
.
Post a Comment for "Getting Multiple Angular Modals To Work With Http Response Data"