CODEWITHSUNDEEP
javascripthtmlangularjs
VarunJi
VarunJi

Reputation: 694

ng-include is not showing html

I have create a custom Popup.html page, which will appear over the current index.html page. So i have included Popup.html in index.html as below

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 page got the entire information from json, when i click the table row from index.html. So it is working fine. But popup.html is not showing in the index.html page when call openGame function. I am not able to get the solution for this, how to show this custom popup.html over index.html? when i saw the html page in firebug then i realize that popup.html is present in the page but height of this is 0px, width is fine. So how can i do this? Please help.

Here is my application link

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

Upvotes: 1

Views: 827

Answers (3)

Mahesh
Mahesh

Reputation: 1635

There are 3 important issues I found.

  1. You have not included bootstrap JS files.
  2. You have explicitly set visibility of your popup to none. display:none
  3. Not sure why are you nesting ng-app inside popup.html. It is not required as you already have set ng-app on body tag

Below is a plunker fixing some part of your code although not a complete solution. http://plnkr.co/edit/TszS69PxKWFRAvlBCGD3?p=preview

Upvotes: 1

psalkowski
psalkowski

Reputation: 414

You have wrong usage of directive ng-include. And you should remove body tag from popup.html. Demo: http://plnkr.co/edit/yEiwiHY7yGXqgmju7xbD?p=preview

You should use:

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

instead of 

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

Update Try to use $rootScope.$broadcast('GAME_INFO_BROADCAST', this.info); in gameInfo controller. Remember to inject $rootScope into controller: app.controller('gameInfo', function($scope, $http, $rootScope)

Upvotes: 1

Alex139602
Alex139602

Reputation: 3

I may be wrong here, but you have a tag in your index.html file. you also have a body tag in your popup.html.

Therefore, Angular is inserting the body tag inside the div, meaning you'll have a body inside a div which may stop it working. I dont know if it will make a differnce but this is the thing that stood out to me immediately.

try removing the body tags and just having the parent popup-content div.

Also, you typed popup.hml instead of popup.html in the question - i dont know if this is a typo, but if it isnt and your actual file is named popup.html then it will not register popup.html in your angular app because you've spelt the extension wrong.

Upvotes: 0

Related Questions