ng-include未显示html

Question

我创建了一个自定义Popup.html页面，该页面将显示在当前index.html页面上。 所以我将Popup.html包含在index.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>

当我单击index.html中的表行时，Popup.html页从json中获取了全部信息。 因此工作正常。 但是，当调用openGame函数时，popup.html不会显示在index.html页面中。 我无法解决此问题，如何在index.html上显示此自定义popup.html？ 当我在Firebug中看到html页面时，我意识到页面中存在popup.html，但是高度为0px，宽度很好。 那我该怎么办呢？ 请帮忙。

这是我的申请链接

http://plnkr.co/edit/hDzPMCfjfSxtVKD2xJz3?p=preview

Answer 1

您对指令ng-include的使用有误。 并且您应该从popup.html中删除body标签。 演示： http ： //plnkr.co/edit/yEiwiHY7yGXqgmju7xbD？p = preview

您应该使用：

<div ng-include="'popup.html'"></div>

代替

<div ng-include src="'popup.html'"></div>

更新尝试使用$rootScope.$broadcast('GAME_INFO_BROADCAST', this.info); 在gameInfo控制器中。 记住将$ rootScope注入控制器： app.controller('gameInfo', function($scope, $http, $rootScope)

Answer 2

我发现了3个重要问题。

您尚未包括引导JS文件。
您已将弹出式窗口的可见性明确设置为“无”。 display:none
不知道为什么将ng-app嵌套在popup.html中。 不需要，因为您已经在body标签上设置了ng-app

尽管不是完整的解决方案，但下面的代码修复了代码的某些部分。 http://plnkr.co/edit/TszS69PxKWFRAvlBCGD3?p=preview

Answer 3

我在这里可能是错的，但是您的index.html文件中有一个标记。 您的popup.html也有一个body标签。

因此，Angular将在div内插入body标签，这意味着您将在div内有一个body，这可能会使它停止工作。 我不知道这是否会有所作为，但这是立即让我脱颖而出的事情。

尝试删除body标签，只设置父popup-content div。

另外，您在问题中键入popup.hml而不是popup.html我不知道这是否是错字，但是如果不是，并且您的实际文件名为popup.html，则它将不会在您的角度应用程序中注册popup.html因为您将扩展名拼写错误。

ng-include未显示html

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-09-15 17:00:24

解决方案2
1 2015-09-15 18:31:48

解决方案3
0 2015-09-15 16:58:35

ng-include未显示html

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-09-15 17:00:24

解决方案2 1 2015-09-15 18:31:48

解决方案3 0 2015-09-15 16:58:35

解决方案1
1 已采纳 2015-09-15 17:00:24

解决方案2
1 2015-09-15 18:31:48

解决方案3
0 2015-09-15 16:58:35