AngularJS: Create new controller and scope for dynamic content

Question

Have a template that I'd like to load using ng-include and assign a controller instance to. This new template/scope/controller needs to be loaded in response to a user interaction (hover or click).

The content of the template has to be set using element.innerHTML because the content is set by a 3rd party.

The user can then click out of the new div and I would like to destroy the controller/scope that was created.

Pseudocode for what I want to achieve:

popup.setContent("<div ng-controller='PopupController'><div ng-include=\"views/LayerPopup.html\"></div></div>");

How do I tell angular to process the ng-include and ng-controller just as though the page was being loaded for the first time?

Thanks!

Edit:
Add plunker to illustrate question
http://plnkr.co/edit/DPuURCoq2hJ0LCLIN2dc?p=preview

Do you mean want to add ng-controller and want angular to compile? $compile ? https://docs.angularjs.org/api/ng/service/$compile If you can post the jsfiddle or plunker, I think we can better understand what you want. @charlietfl . Maybe you ask some question to make the question clearer. — hutingung, Jul 19 '14 at 15:08
looking at demo you can't access compile functions easily from outside of angular unless you use a directive. Still not clear what the exact higher level issue is that you have. Inside directive can run third party code and use `$compile` or `$apply` depending on scenario — charlietfl, Jul 19 '14 at 16:14
@charlietfl ok, can you help me by showing me how to get angular to interpret a directive after initial page load? Something like: $("body").append(""). That would solve my problem too! — Steve Horn, Jul 19 '14 at 17:31
based on what event? A change in scope or user interaction? I suspect you are trying to overlay angular on top of jQuery and need to read: [how-do-i-think-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background) — charlietfl, Jul 19 '14 at 17:37

score 1 · Answer 1 · edited Jul 19 '14 at 17:37

http://jsfiddle.net/ADukg/5420/

Not using ngInclude, but it does fill these criteria:

You pass in a templateURL.
Pass in the name of the controller you would like to use.
Pass in the third party content (which in turn gets set with $element.innerHTML).
Setup a click listener someplace outside the $scope of the popup, which triggers a kill command on the popup.

This is how I imagine you would instantiate it:

<directive tpl="tpl.html" 
           ctrl="DirectiveController" 
           third-party-content="{{thirdPartyContent}}">
</directive>

Not sure this will suit you, but I had a fun time putting it together and maybe it'll prove useful to someone else.

In any case, I have to agree with the comments you've recieved so far. It's a bit cryptic as to what you have to work with right now and what possible options are available to you.

spsteffl · Answer 2 · 2014-07-19T18:34:32.653

Here is a plunker of what you are trying to do. If you click on a button, a popup will show a template, and you can click on the template and it will stay up, but if you click out of it, it will get removed.

HTML

<body ng-controller="MainCtrl" ng-click="closePopup()">
  <button ng-click="openPopup($event)" id="clicktarget">Click</button>
  <p>Hello {{name}}!</p>

  <div ng-include="getPopup()" ng-click="$event.stopPropagation()">  
  </div>

  <script type="text/ng-template" id="theTemplate.html">
    <div ng-controller="PopupController">
      <div ng-include="'LayerPopup.html'"></div>
    </div>
  </script>
</body>

JS

angular.module('plunker', [])
.controller('MainCtrl', function($scope, $templateCache) {
  $scope.name = 'World';
  $scope.popupTmpl = null;
  $scope.openPopup = function($event){
    $scope.popupTmpl = 'theTemplate.html';
    $event.stopPropagation();
  };
  $scope.getPopup = function(){
    return $scope.popupTmpl;
  };
  $scope.closePopup = function(){
    $scope.popupTmpl = null;
  };
})
.controller('PopupController', ['$scope', function($scope) {
  $scope.aVariableMaybe = 'lulz something';
}]);

On a side note, try to get rid of that JQuery stuff when you are using Angular. Angular can do everything on its own

AngularJS: Create new controller and scope for dynamic content

2 Answers2