Question

我得到了这段代码，其中指令在指令中：

moveTaskToBack()

https://www.w3schools.com/code/tryit.asp?filename=FIKIWZCHGPPD

将模板<script> app.directive('testChart', function () { return { restrict: 'E', transclude: true, controllerAs: 'chartCtrl', template: '<div><ng-transclude></ng-transclude></div>', controller: ['$scope', '$element', '$attrs', '$compile', function ChartController($scope, $element, $attrs, $compile) { $scope.chartId = $scope.$id; let content = angular.element('<div><div id="container'+ $scope.chartId + '"></div></div>'); $element.append(content); $compile($element.contents())($scope); //<---- recompilation var html = $element.html(); var hc = Highcharts.chart('container' + $scope.chartId, { }); }] }; }) </script>添加到模板时，我收到错误：<ng-transclude></ng-transclude>

导致此错误的原因是什么？我已经查看了同样问题的其他问题，但我无法将这些解决方案应用到我的问题中。

Answer 1

testChart指令中的重新编译行导致问题。在执行该行之前，已经创建（并且已编译）的testChart指令为：

<div ng-transclude=""></div>

稍后添加一些元素＆amp;编译它将它视为具有ng-transclude指令的简单div元素，默认情况下显示Orphan ngTransclude Directive错误。所以，只需从指令定义中删除该行，其他一切正常。所以你的指令定义将是（相同的，不包括重新编译行）

app.directive('testChart', function() {
  return {
    restrict: 'E',
    transclude: true,
    controllerAs: 'chartCtrl',
    template: '<div><ng-transclude></ng-transclude></div>',
    controller: ['$scope', '$element', '$attrs', '$compile', function ChartController($scope, $element, $attrs, $compile) {

      $scope.chartId = $scope.$id;
      let content = angular.element('<div><div id="container' + $scope.chartId + '"></div></div>');
      $element.append(content);
      //$compile($element.contents())($scope); //<---- recompilation 
      var html = $element.html();
      console.log(html);
      var hc = Highcharts.chart('container' + $scope.chartId, {

      });
    }]
  }; 
})

Working plunker

在某些需要强制编译的情况下，请先将其附加到指令模板，然后使用ng-transclude。

在Angularjs中遇到错误：[ngTransclude：orphan]在模板中非法使用ngTransclude指令

1 个答案: