如何在 Angular 中呈现已编译的 Transcluded HTML？答案

【问题标题】：How can I render compiled Transcluded HTML in Angular?如何在 Angular 中呈现已编译的 Transcluded HTML？
【发布时间】：2017-04-25 14:44:15
【问题描述】：

我正在尝试使用 angular 呈现表示自定义指令的 html，以便我可以嵌套 div 任意次数。当我运行下面的代码时，我确实看到标签被正确嵌入，并且我的输出中的浏览器按字面意思显示字符串文本“”。我想将它编译成 html 并渲染并尝试在下面使用

$compile(element.contents())(scope);

但是，这会导致有关孤立嵌入的控制台错误以及说它无法读取我的对象的属性的错误。我认为这是编译成我不希望它编译的东西，但不确定为什么或如何看到结果是什么。有什么想法让我去这里吗？有没有更好的角度来做到这一点？

带有指令的模块

angular.module('myApp.APP', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/testapp', {
    templateUrl: 'javascripts/nestedExample/testHTML.html',
    controller: 'testController'
  });
}])

.controller('testController', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
  $scope.paneDirective = "<div pane> </div>";
}])

.directive('pane', function($compile) {
  return {
    scope: {},
    template: "<div data-split-pane> <div data-split-pane-component data-width='33%'><p>top</p></div><div data-split-pane-divider data-width='5px'></div> <div data-split-pane-component> <ng-transclude></ng-transclude> <p>bottom</p></div></div>",
    transclude: true,
    link: function(scope, element, attrs) {
      console.log(element.contents())
      //$compile(element.contents())(scope);
    },
  };
});

简化的 html

<div ng-controller="testController">
  <div pane> {{paneDirective}}  </div>
</div>

编辑模板中使用的格式化 html 代码

<div data-split-pane>
   <div data-split-pane-component data-width='33%'>
      <p>top</p>
   </div>
   <div data-split-pane-divider data-width='5px'></div>
   <div data-split-pane-component>
      <ng-transclude></ng-transclude>
      <p>bottom</p>
   </div>
</div>

【问题讨论】：

标签： javascript angularjs angular-directive angularjs-ng-transclude transclusion

【解决方案1】：

在模板中使用 Angular 的 ng-transclude 指令来指定被嵌入内容的插入点，如下所示：

   template: '<div ...><div ng-transclude></div> </div>'

【讨论】：

那里的 html 乱七八糟的实际上有一个 transclude 正在进行。对不起，它不是更具可读性。 HTML 被插入就好了.. 就像一个字符串，当我尝试编译它时会出现错误。

【解决方案2】：

我不确定这是否会有所帮助，但是您可以解决此问题的一种方法是生成您的 html 字符串，然后将整个内容编译出来。您包含的任何其他指令都将被编译。看看这个，看看它是否适合你......

https://plnkr.co/edit/FacA3AwOqJA2QARK28c8?p=preview

angular.module('myApp', [])

.controller('testController', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
  $scope.paneDirectiveContent = `
    <div data-split-pane> 
      <div data-split-pane-component data-width='33%'>
        <p>top</p>
      </div>
      <div data-split-pane-divider data-width='5px'>
      </div> 
      <sample></sample>
      <div data-split-pane-component>  
        <p>bottom</p>
      </div>
    </div>
  `;
}])

.directive('pane', function($compile) {
  return function(scope, element, attrs) {
      element.html(scope.$eval(attrs.pane));
      $compile(element.contents())(scope);
    }
});

作用于这个 Html：

<div ng-controller="testController">
   <div pane="paneDirectiveContent"></div>
</div>

任何其他指令都会被渲染：

.directive('sample', function($compile) {
  return {
    template: `<b>Other directives will be rendered</b>`
  }
})

【讨论】：