Question

这让我疯了。大约一年前，我在将网站转换为AngularJS时摸不着头脑。我把它变成了一个宜居的状态，虽然有点俗气。我试图添加一个新页面，它将使用模态对话框。我有代码与模态对话框工作。由于某种原因，这个没有。我发现控制台中缺少调试信息非常烦人。不管怎样，我希望我只是忽略了什么。我已经把控制器的内容切掉了...以及那个事实的HTML，因为没有必要这样做。

症状：我点击了＃34;创建警报＆＃34;没有任何反应。您可以看到页面本身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

$ location服务正在将网址更改为： http://www.gamengai.com/bad_popup.html#/openModal

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

将$ 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有两种配置模式，用于控制浏览器地址栏中URL的格式：Hashbang模式（默认）和HTML5模式，它基于使用HTML5 History API。应用程序使用相同的API这两种模式和$ location服务都可以使用适当的URL段和浏览器API来促进浏览器URL更改和历史记录管理。“

https://code.angularjs.org/1.2.25/docs/guide/ $位置

或者如果您不需要位置服务，只需从应用中删除$ location：

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

更多信息： https://code.angularjs.org/1.2.25/docs/guide/ $位置

将超链接从href更改为ng-href：

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

AngularJS模态对话框无法打开

1 个答案: