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

$compile返回一个函数，调用该函数时会返回一个 element ，因此您需要自己将其附加到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

Answer 2

您的示例和说明仍然有些模糊。您是否打算将模板作为子元素包含在指令中？ Transclusion可能就是您想要的。

具有隔离范围的AngularJS指令

2 个答案: