Mahajan344 Mahajan344 - 2 years ago 167
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;

templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'loginController'

$scope.cancelForm = function () {

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

<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">
<input type="button" class="btn btn-default" value="Close"
ng-click="cancelForm()" />

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 Source

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

        templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
        scope: $scope
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download