CODEWITHSUNDEEP
angularjs
coure2011
coure2011

Reputation: 42404

How to get inner html of custom directive?

I want to create a directive for html like this

<div my-modal my-modal-id="test">
    <div class="inner">Hello Inner</div>
</div>

want to generate html from above to something like

<div id="test">
    <h1>My Heading</h1>
    <div class="b">
        Hello Inner
    </div>
</div>

js

.directive('myModal', function() {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            myModalId: '@'            
        },
        compile: function(tEle, tAttrs, transcludeFn) {
            //what to do here?
            //I want to get div.inner of the original html
        },
        template: '<div id="{{myModalId}}">' +
            '<h1>My Heading</h1>' +
            '<div class="b"></div>' +
            '</div>'
    }
});

Upvotes: 0

Views: 1507

Answers (1)

Jason Goemaat
Jason Goemaat

Reputation: 29204

I don't know if you can use a template, it seems to overwrite the existing html before compile is called. Grabbing the HTML and replacing it yourself seems to work (plnkr):

.directive('content', function($compile) {
  var dir = {
    restrict: 'E',
    xemplate: '<div id="{{myModalId}}">' +
      '<h1>My Heading</h1>' +
      '<div class="b">Original:<br/><pre>{{original}}</pre></div>' +
      '</div>',
    compile: function(element, attrs, linker) {
      var original = element.html(); // grab original
      element.html(dir.xemplate); // set template html manually
      return function(scope, element, attributes) {
        scope.original = original
      }
    }
  };
  return dir;
});

Upvotes: 1

Related Questions