populate popup content using angularjs?

[rhodebump]

Hi,
Looking at using your library (thanks!), and I wanted to share what I how I wanted to use it since it doesn't appear to support using it this way.

I would like to populate the popup content using a div from my html document . The contents of the div would actually be coming from a controller/scope in angularjs.

i.e. how can I display "popupcontent" in the popup?

<ng-pop-up option='ngPopupConfig'></ng-pop-up>
<div id="popupcontent">
Hi, my name is Phillip
</div>

Thanks again,
Phillip

[MarkoCen]

Hi Phillip,

You can put the content into an external html file, and fetch it into DOM by using ng-include, and in ngPopup, using templateUrl to insert the content,

here is a simple demo:
Demo

As you can see in that demo, although DOM and popup have same html contents, they actually in different scopes

[rhodebump]

Hi Mark,

Thank you for the example. I did spend this evening with it trying to get it to work. I am going to further read up on angular scopes before I spend more time on it. My ng-include works well, but the dialog content (while rendering the template) appears to be using a different scope from the ng-include, and I wanted both scopes to be the same.

I will report back later when I have it working.

Thanks again.
Phillip

  <div ng-controller="chatPopup">
    <ng-pop-up option="ngPopupOption"></ng-pop-up>
     <div ng-include="'chat/admin-chat.html'"></div>
  </div>

chat.controller('adminChatController',
  function($rootScope,$scope,chatService) {
    $scope.closeChat = function(room,session_id) {
           room.closeChat(session_id);
    }
    $scope.sendMessage = function(room,session_id) {

      console.log("submit message ");
      if (! room.message_text) {
        return;
      }
      room.send({
        sid: session_id,
        content:  room.message_text
      });
      room.message_text = '';
    };

     }
   );




chat.controller('chatPopup', 
function($rootScope,$scope) {

  $scope.ngPopupOption = {
      template:' ',
      templateUrl:"chat/admin-chat.html",
     draggable: true,
     width: 400,
     height: 400,
    position:{
     top:200,
     left:200
  }
}

}
);

[MarkoCen]

When using ng-include, a new scope will always be created, so does ngPopup.
For my understanding, that is the way Angular to decouple model logic. So I think sharing scope is not the best practice. In your case, you can put the shared data in $rootScope or service, and refer the data in adminChatController

[MarkoCen]

Close this issue since no further feedback