Mahajan344 Mahajan344 - 3 months ago 12
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

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
    });
Comments