AngularJS模式对话框未打开

Question

This is driving me nuts. 这让我发疯。 I fumbled around with converting a site to AngularJS about a year ago. 大约一年前，我摸索着将网站转换为AngularJS。 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. 我已经删除了控制器的胆量...和该事实的HTML，因为这不是必需的。

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>

Answer 1

the $location service is changing the url to: http://www.gamengai.com/bad_popup.html#/openModal $ location服务会将网址更改为： http : //www.gamengai.com/bad_popup.html#/openModal

But JQuery UI needs: http://www.gamengai.com/bad_popup.html#openModal 但是JQuery UI需要： http : //www.gamengai.com/bad_popup.html#openModal

Configure the $location service to not use the hashbang mode: 将$ location服务配置为不使用hashbang模式：

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." “ $ location服务具有两种配置模式，可控制浏览器地址栏中的URL格式：Hashbang模式（默认）和基于使用HTML5 History API的HTML5模式。应用程序在两种模式下均使用相同的API， $ location服务将与适当的URL段和浏览器API配合使用，以方便浏览器URL更改和历史记录管理。”

https://code.angularjs.org/1.2.25/docs/guide/ $location 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: 或者，如果您不需要定位服务，则只需从应用中删除$ location即可：

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 此处提供更多信息： https : //code.angularjs.org/1.2.25/docs/guide/ $ location

Change the hyperlinks from href to ng-href: 将超链接从href更改为ng-href：

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

AngularJS模式对话框未打开

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-09-13 00:38:09

AngularJS模式对话框未打开

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-09-13 00:38:09

解决方案1
1 已采纳 2015-09-13 00:38:09