I am experiencing an issue with displaying a modal dialog using AngularJS bootstrap.ui. After calling $modal.open(...), the screen grays out, the HTML from my templateUrl is fetched from the server, but the modal does not appear. When I click on the gray area, it seems like the modal "closes" as the gray overlay disappears and the screen returns to normal. I can't seem to figure out why the modal isn't showing up.
Currently, I am following this tutorial: Angular directives
I am working with Visual Studio 2013, MVC 5, and AngularJS 1.2.2.
In my project, I am using the bootstrap.css file that comes bundled with Visual Studio. It includes the necessary modal classes. There are no errors being reported in the Javascript console. Here is how my app is defined:
var blogApp = angular.module('blogApp', ['ngResource', 'ngSanitize', 'ui.bootstrap']) ...
blogApp.controller('blogController',
function blogController($scope, $modal, $log, blogData, userData) {
...
$scope.showPrivacy = function() {
$modal.open({
templateUrl: '/Privacy',
controller: 'PrivacyInstanceController'
});
return false;
};
});
var PrivacyInstanceController = function($scope, $modalInstance) {
$scope.close = function() {
$modalInstance.close();
};
}
Here is my markup:
<div ng-controller="blogController">
<a ng-click="showPrivacy()">Privacy Policy</a>
</div>
Do you have any insights as to why the screen is graying out, the /Privacy resource is being loaded, clicking the gray area returns the screen to normal, but the modal itself doesn't show up?