Mahajan344 Mahajan344 - 6 months ago 20
AngularJS Question

Angular Modal is not working properly

I am using Angular bootsrap modal service. version of ui-bootstrap is a

ngular-ui-bootstrap 1.3.3
. below is my code.

First on module , I have registered correctly.

var angularFormsApp = angular.module("angularFormsApp", ["ngRoute", "ui.bootstrap"]);


then on angular controller , I have injected this directive correctly.

var loginController = function ($scope, $window, $routeParams, $uibModal, DataService)


then I am calling this modal by following code inside same controller

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

$uibModal.open({
templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'loginController'
});
};

$scope.cancelForm = function () {
$uibModalInstance.dismiss('cancel');
};


Now as you can see I have created separate html file for modal and below is html

<div class="modal-header">
<h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" value="Close"
ng-click="cancelForm()" />
</div>


Now till here everything is working , I mean on error method , modal is showing but problem is its showing blank , even nothing happening on close button click.

There is no error in console of chrome browser. Here is screen shot.

enter image description here

Answer

Your Modal does not know about your controller's scope. Try changing to this:

    $uibModal.open({
        templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
        scope: $scope
    });