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 functio

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.