Question

我正在尝试使用angular渲染表示自定义指令的html，以便我将div任意次数嵌套。当我运行下面的代码时，我确实看到标签被正确转换，输出中的浏览器字面上显示字符串文本＆＃34; ＆＃34 ;.我想将其编译成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>

Answer 1

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

Answer 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>`
  }
})

如何在Angular中渲染已编译的Transcluded HTML？

2 个答案: