AngularJS directive with isolate scope

Question

I have a directive that might look like this:

a.directive('autoResize', function($compile) {
  return {
    scope: {},
    link: function(scope, elem) {
      // HTML here is just an example
      var template = angular.element('<div some-angular-stuff></div>');
      $(elem).append(template);
      template = $compile(template)(scope);
    }
  }
});

When I compile to isolate scope it's not working. No content is shown. Seems like it would work if I compile to the parent scope. Any chance I could use the isolate scope?

Thanks

jsfiddle.net/sh0ber/6m54x9hc Your code works no problem for me — Dan
– Dan, Commented Jun 5, 2019 at 13:31

Mosh Feu · Accepted Answer · 2019-06-05 13:29:02Z

0

$compile returns a function that when you call it returns an element so you need to append it to the DOM by yourself:

angular.module('app', [])
  .controller('ctrl', function() {})
  .directive('autoResize', function($compile) {
    return {
      scope: {},
      link: function(scope, elem) {
        // HTML here is just an example
        var template = $compile(angular.element('<div some-angular-stuff></div>'))(scope);
        $(elem).append(template);
        console.log($(elem).html());
      }
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <auto-resize></auto-resize>
</div>

https://docs.angularjs.org/guide/compiler#how-directives-are-compiled

answered Jun 5, 2019 at 13:29

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan Over a year ago

He's actually already done this, only difference is he appends before compiling rather than after.

Mosh Feu Over a year ago

Right, that what I answered so you need to append it to the DOM by yourself.

Mark Clark · Accepted Answer · 2019-06-05 13:30:48Z

0

Your example and description is still mildly vague. Are you intending to include the template as a child inside your directive? Transclusion might be what you're after.

answered Jun 5, 2019 at 13:30

Mark Clark

5434 silver badges16 bronze badges

Collectives™ on Stack Overflow

AngularJS directive with isolate scope

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related