CODEWITHSUNDEEP
angularjsbootstrap-modalangular-directive
Mahajan344
Mahajan344

Reputation: 2550

Angular Modal is not working properly

I am using Angular bootsrap modal service. version of ui-bootstrap is angular-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

Upvotes: 1

Views: 1095

Answers (2)

Mary
Mary

Reputation: 165

To use your current controller variables try to change controller: 'loginController' to scope: $scope. It will pass current scope to the modal.

Similar problem was here: AngularJS passing data to bootstrap modal

Upvotes: 0

Brian
Brian

Reputation: 5059

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

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

Upvotes: 2

Related Questions