CODEWITHSUNDEEP
javascriptangularjsmodal-dialog
kiss-o-matic
kiss-o-matic

Reputation: 1181

AngularJS modal dialog not opening

This is driving me nuts. I fumbled around with converting a site to AngularJS about a year ago. I got it to a livable state, although a bit tacky. I'm trying to add a new page, which will use a modal dialog. I have code with modal dialogs that work. This one, for some reason, does not. I'm finding the lack of debugging info in the console highly irritating. Anywho, I'm hoping I'm just overlooking something. I have cut the guts of the controller out... and the HTML for that fact as none of it is required for this.

Symptom: I hit "Create Alert" and nothing happens. You can see the page itself here.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-sanitize.min.js"></script>
<script>

angular.module('myApp', ['ngSanitize'])
.controller("alertController", ['$scope','$http','$sce','$location', function($scope,$http,$sce,$location) {
    $scope.data = "Hello World";
}]);

</script>
</head>
<body>

<div class="parent_column" style="min-width: 700px; max-width: 700px; margin: 50px auto;" data-ng-app="myApp" data-ng-controller="alertController">
{{data}}
            <span id="openModal" class="modalDialog" style="padding: 3px;">
                <div style="width: 250px;">
                    Modal!
                    <a href="#close" title="Close" class="close">X</a>
                </div>
            </span>

        <div class="ggButton" style="line-height: 135%;"><a href="#openModal">Create Alert</a></div>

</div>

Upvotes: 0

Views: 1737

Answers (1)

ProgrammerGuy
ProgrammerGuy

Reputation: 439

the $location service is changing the url to: http://www.gamengai.com/bad_popup.html#/openModal

But JQuery UI needs: http://www.gamengai.com/bad_popup.html#openModal

Configure the $location service to not use the hashbang mode:

angular.module('myApp', [])
.config(function($locationProvider) {
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
    $locationProvider.hashPrefix('!');
})
.controller("alertController", ['$scope','$http','$sce', '$location',        
function($scope,$http,$sce, $location) {
    $scope.data = "Hello World";
}]);

"$location service has two configuration modes which control the format of the URL in the browser address bar: Hashbang mode (the default) and the HTML5 mode which is based on using the HTML5 History API. Applications use the same API in both modes and the $location service will work with appropriate URL segments and browser APIs to facilitate the browser URL change and history management."

https://code.angularjs.org/1.2.25/docs/guide/$location

Or if you don't need the location service, you could simply remove $location from your app:

angular.module('myApp',[])
.controller("alertController", ['$scope','$http','$sce', function ($scope,$http,$sce) {
    $scope.data = "Hello World";
}]);

More info here: https://code.angularjs.org/1.2.25/docs/guide/$location

Change the hyperlinks from href to ng-href:

<a ng-href="#close" title="Close" class="close">X</a>
<a ng-href="#openModal">Create Alert</a>

Upvotes: 1

Related Questions