我已经创建了一个自定义的pop .html页面,它将出现在当前的index.html页面。所以我在index.html中包含了pop .html,如下所示
index . html
<body ng-app="GameInformation">
<div id="completeGames" ng-controller="gameInfo">
<div ng-controller="popupInfo">
<div ng-model="popup">
<div ng-include src="'popup.html'"></div>
</div>
</div>
</div>
<div class="Row" ng-repeat="info in gameDetails | filter:searchTxt" ng-click="openGame()">
<div class="Cell">{{info.GameName}}</div>
</div>
App.js
var app = angular.module('GameInformation', []);
app.controller('gameInfo', function($scope, $http)
{
$http.get("data/GameInfo.json").success(function(response){
$scope.gameDetails = response;
}).error(function(data, status, headers, config) {});
$scope.openGame = function()
{
$scope.$broadcast('GAME_INFO_BROADCAST', this.info);
}
});
app.controller('popupInfo', function($scope)
{
$scope.$on('GAME_INFO_BROADCAST', function(event, args) {
console.log("Received ->" +args.GameName);
$scope.gameInfoPopupVisible = true;
$scope.gameDetail = args;
})
});
popup.hml
<body ng-app="GameInformation">
<div id="popup_content">
<table>
<tr>
<td valign="top">
<b>Game Name: </b>
</td>
<td valign="top">
{{gameDetail.GameName}}
</td>
</tr>
</table>
</div>
</body>
Popup.html页面从json中获得了整个信息,当我从index.html中单击表行。所以它工作得很好。但是当调用openGame函数时,弹出。html没有显示在index.html页面中。我不能得到这个解决方案,如何显示这个自定义弹出。html超过index.html?当我在firebug中看到HTML页面时,我意识到页面中存在pop . HTML,但高度为0px,宽度为0px。那么我该怎么做呢?请帮助。
这是我的应用程序链接
http://plnkr.co/edit/hDzPMCfjfSxtVKD2xJz3?p =预览
你错误地使用了ng-include指令。你应该从pop .html中删除body标签。演示:http://plnkr.co/edit/yEiwiHY7yGXqgmju7xbD?p=preview
你应该使用:
<div ng-include="'popup.html'"></div>
代替
<div ng-include src="'popup.html'"></div>
尝试在gameInfo控制器中使用$rootScope.$broadcast('GAME_INFO_BROADCAST', this.info);
。请记住将$rootScope注入控制器:app.controller('gameInfo', function($scope, $http, $rootScope)
我发现有三个重要的问题。
- 你没有包含引导JS文件
- 你已经明确地将你的弹出窗口的可见性设置为none。
display:none
不知道你为什么要把ng-app嵌套在pop .html里面。事实并非如此需要,因为你已经在
body
标签上设置了ng-app 下面是一个柱塞修复你的代码的一部分,虽然不是一个完整的解决方案。http://plnkr.co/edit/TszS69PxKWFRAvlBCGD3?p=preview
我可能在这里错了,但是您在index.html
文件中有一个标记。你也有一个主体标签在你的popup.html
。
因此,Angular会在div中插入body标签,这意味着你在div中有一个body,这可能会使它停止工作。我不知道这是否会有什么不同,但这是我立即注意到的事情。
尝试删除body标签,只保留父pop -contentdiv。
另外,你在问题中输入了popup.hml
而不是popup.html
-我不知道这是否是一个拼写错误,但如果它不是,你的实际文件被命名为pop .html,那么它将不会在你的angular应用程序中注册popup.html
,因为你拼写错了扩展名