Директива AngularJS с изолированной областью действия

Question

У меня есть директива, которая может выглядеть так:

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);
    }
  }
});

Когда я компилирую, чтобы изолировать область видимости, это не работает. Контент не отображается. Похоже, это будет работать, если я скомпилирую в родительскую область. Есть ли шанс, что я смогу использовать изолятор?

Спасибо

Answer 1

Ваш пример и описание все еще немного расплывчаты.Вы собираетесь включить шаблон в качестве дочернего элемента в свою директиву? Трансклюзия может быть тем, что вы ищете.

Answer 2

$compile возвращает функцию, которая при вызове возвращает элемент , поэтому вам нужно добавить его в DOM самостоятельно:

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