Question

我创建了一个自定义的Popup.html页面，该页面将显示在当前的index.html页面上。所以我在index.html中包含了Popup.html，如下所示

的index.html

var bookmark = "my default";
var entry = scorm.get("cmi.entry");
var location; //wait for it...

if(entry !== "ab-initio"){

    //not querying cmi.location unless we're sure this isn't the first visit
    location = scorm.get("cmi.location");

    //Wrapping in a conditional in case cmi.location returns false or an empty string
    if(location){ bookmark = location; }

}

courseFunctionThatUsesBookmarkValue(bookmark);

App.js

<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>

popup.hml

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;
    })
});

当我点击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>

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

Answer 2

我发现了3个重要问题。

您尚未包含引导程序JS文件。
您已明确将弹出窗口的可见性设置为无。 display:none
不确定为什么要在popup.html中嵌套ng-app。它不是已经在body标记

下面是一个修复代码某些部分的插件，虽然不是一个完整的解决方案。 http://plnkr.co/edit/TszS69PxKWFRAvlBCGD3?p=preview

Answer 3

我可能在这里错了，但您的index.html文件中有一个标记。您的popup.html中还有一个正文标记。

因此，Angular将body标签插入div中，这意味着你在div中有一个可能阻止它工作的div。我不知道它是否会有所不同，但这是我立刻突显出来的东西。

尝试删除body标签，然后只使用父popup-content div。

此外，您在问题中键入了popup.hml而不是popup.html - 我不知道这是不是错字，但如果它不是，而您的实际文件名为popup.html则不会注册您的角度应用中popup.html，因为您已将错误拼写错误。

ng-include没有显示html

3 个答案: