Programmatic Angular Templates?

Question

I am working on a project that uses Angular.js, and a custom jQuery-based control that fires an event with the data that the event pertains to; I want to be able to listen to that event in Angular (easy enough) and then show a dialog box with a template that's bound to that data, so that when the values are changed in the dialog, they are automatically reflected in the object that was sent along with the event.

I'm not sure how to do this in Angular, how to render a template on demand that's bound to a data object.

For example; the control fires "clicked" with the data of the visual object that was clicked. I want Angular to listen, then render the contents of a template from a file (ex. "menuDialog.html") so that I can then place it on the screen where I clicked (I can do the placing).

I've read directives are the way to go, but that seems to be for handling custom HTML tags or attributes. Would the same apply here, and how would I programmatically call a directive, data bind it and get the contents to put on the page?

I would know exactly how to implement this in Backbone+Handlebars, but I'm not too familiar with Angular.

Thanks

Answer 1

The controller:

.controller('MyCtrl', function($scope) {
  $scope.html = '<div>testing</div>'; // or use $http to fetch remotely
})

The markup:

<div html-template="html"></div>

The directive:

.directive('htmlTemplate', function($compile) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.click(function() {
        var html = scope.$eval(attrs.htmlTemplate);
        var newElement = $compile(html)(scope);
        <do stuff with newElement (it's a jQuery element)>
      });
    }
  }
})

Note that any directives in the html will be processed during the call to $compile.

Answer 2

Based on my understanding of the problem here is what you need to do.

1. Create a directive to handle events raised by custom jquery control. Angular itself support event directives like ng-click but i am not sure whether it would work in case your jquery control is generating custom markup.

2. You controller should contain a property (javasript object) that contains the model of the popup you need to show + a boolean property to denote when to show model

   $scope.popupModel=null; $scope.showPopup=false;

3. You html should use ng-include to include you template html. ng-include supports template both from server and from client using script tags.

4. The template html code should bind to property popupModel.

5. In the directive definition add a scope property using the object hash syntax that bind two ways to the controller scope properties popupModel and showPopup. Something like

   directive('htmlTemplate', function($compile) {

     return {
       restrict: 'A',
       scope:{model=@popupModel,show=@showPopup},
       link: function (scope, element, attrs) {
             element.click(function(e) {
                  model=e.model;
                  show-true;
             });
       }
   })
   

6. The popup should get shown whenever shopPopup is true. This can be done with ng-show.

I suggest you to start digging deeper into directives and ng-include.