ng-include is not showing html

ng-include is not showing html

本文关键字：html showing not is ng-include      更新时间：2023-09-26

我已经创建了一个自定义的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)

我发现有三个重要的问题。

  1. 你没有包含引导JS文件
  2. 你已经明确地将你的弹出窗口的可见性设置为none。display:none
    3. 不知道你为什么要把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，因为你拼写错了扩展名

相关文章：