Mahajan344 Mahajan344 - 1 year ago 45
AngularJS Question

Angular bootstrap modal not working

I am working on angular application where I am displaying pop up message using bootstrap modal.
but its not displaying dynamic header text and body text.Pop up is showing but with blank header and body.

my main controller is as below

var requestUserController = function ($scope, $window, $uibModal, DataService) {
$scope.modalOptions = {
headerText: "",
bodyText: ""
}

var onServerError = function (data) {
$scope.modalOptions.headerText = "Error";
$scope.modalOptions.bodyText = data.statusText;


var serverModel = $uibModal.open({
templateUrl: window.serverUrl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'requestUserController',
scope: $scope
});

$scope.cancelForm = function () {
serverModel.close();
};
};

var onClientDataComplete = function (data) {
//window.hideProgress();
$scope.requestUser.clientDrp = data;
$scope.clientSelected = $scope.requestUser.clientDrp[0];
};

//window.showProgress();
DataService.getListofClients()
.then(onClientDataComplete, onServerError);

}

App.controller("requestUserController", ["$scope", "$window", "$uibModal", "DataService", requestUserController]);


and html for modal is

<div class="modal-header" ng-class="{true: 'alert-success', false: 'alert-danger'}[modalOptions.headerText == 'Success']">
<h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
<input type="button" class="btn icn-ok" value="Ok"
ng-click="cancelForm()" />
</div>


But pop up is showing blank header and body text

Answer Source

Remove loading of 'requestUserController' from your code and use the following code for open popup window

var serverModel = $uibModal.open({
        templateUrl: window.serverUrl + 'app/ErrorMessages/PopUpErrorMessage.html',
        scope: $scope
    });