Angular Modal is not working properly

Question

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.

Check the Network tab in Chrome dev tools to see if the modal template is retrieved correctly. Make sure your controller isn't registered as `LoginController` instead of `loginController`. — tasseKATT, Jun 03 '16 at 05:12

score 2 · Accepted Answer · answered Jun 03 '16 at 05:14

2

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

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

answered Jun 03 '16 at 05:14

Brian

4,921
3
20
29

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

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

edited May 23 '17 at 11:58

Community

1
1

answered Jun 03 '16 at 05:16

Mary

166
13

Angular Modal is not working properly

2 Answers2