Skip to content

Instantly share code, notes, and snippets.

@vogelbeere
Created April 13, 2018 13:59
Show Gist options
  • Save vogelbeere/a69a6635fc6fdeba0515d0c1e6f48453 to your computer and use it in GitHub Desktop.
Save vogelbeere/a69a6635fc6fdeba0515d0c1e6f48453 to your computer and use it in GitHub Desktop.
Getting multiple Angular modals to work with http response data

I am building an application to authenticate with Moodle and get Json data from a Moodle web service, and using AngularJs to display the data in the app. There are multiple functions on the Moodle webservice, so I need multiple controllers in the Angular app.

Add a button to trigger the modal

This goes inside the ng-repeat block

{{item.name}}

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.

<!--Step 1. Put the required script tags in your HTML-->
<script src="scripts/angular.min.js"></script>
<script src="scripts/ui-bootstrap.js"></script>
<script src="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-->
<div role="main" id="main" class="ui-content scroll" ng-app="myApp">
<!--MODAL WINDOW for item details -->
<script type="text/ng-template" id="itemModalContent.html">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="cancel right button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">
<i class="fa fa-close"></i>
</button>
<span class="item-name">{{item.name}}</span>
</div>
<div class="modal-body">
<p>{{item.description}}</p>
</div>
<div class="modal-footer">
<button type="button" class="button cancel btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
<button type="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;
}
}
});
};
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment