在指令中包装 md-tabs 会产生 "Orphan ngTransclude Directive" 错误

Question

我想创建一个包装 md-tabs 的指令，但出现错误 "Orphan ngTransclude Directive"。我已经复制了这个片段中的错误：

angular.module('transcludeExample', ['ngMaterial'])
   .directive('worksGreat', function(){
      return {
        restrict: 'E',
        transclude: true,
        template: '<ng-transclude></ng-transclude>'
      };
  })
  .directive('doesntWork', function(){
      return {
        restrict: 'E',
        transclude: true,
        template: '' + 
         '<md-tabs md-dynamic-height>' +
           '<md-tab label=\'tab 1\'>' + 
             '<ng-transclude></ng-transclude>' +
           '</md-tab>' +
         '</md-tabs>'
      };
  })

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-simpleTranscludeExample-production</title>
  
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
</head>
<body ng-app="transcludeExample">
  <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>

    <!-- Angular Material Javascript using GitCDN to load directly from `bower-material/master` -->
    <script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>

<div>
  <h3>ng-transclude in a directive works great:</h3>
  <works-great>Inner text</works-great>
  <hr/>
  
  <h3>md-tabs without a directive works great:</h3>
  <md-tabs md-dynamic-height>
    <md-tab label="tab 1">
      Inner text
    </md-tab>
  </md-tabs>
  <hr/>
  
  <h3>combining md-tabs with a directive doesn't work:</h3>
  <doesnt-work>Inner text</doesnt-work>
</div>
</body>
</html>

我发现 this answer 可以手动操作模板之外的元素，但我希望有一种更简洁的 "more angular" 方式。这里发生了什么？有没有一种方法可以定义 ng-transclude 应该适用于什么指令？

Answer 1

This comment on github 提出解决方案。 ng-transclude 被设计为通用的，因此它可以与任何指令一起使用，但在这种情况下，这就是问题所在。幸运的是，模仿起来非常简单，我们可以用 require 指定它应该应用于哪个父级。

我已经用有效的解决方案更新了我的代码片段：

var orphanDemoCtrl = function($transclude){
  this.$transclude = $transclude;
}

angular.module('transcludeExample', ['ngMaterial'])
  .controller('orphanDemoCtrl', orphanDemoCtrl)
  .directive('orphanDemo', function(){
      return {
        restrict: 'E',
        transclude: true,
        template: '' + 
         '<md-tabs md-dynamic-height>' +
           '<md-tab label=\'tab 1\'>' + 
             '<orphan-demo-transclude></orphan-demo-transclude>' +
           '</md-tab>' +
         '</md-tabs>',
        controller: orphanDemoCtrl
      };
  })
  .directive('orphanDemoTransclude', function(){
      return {
        require: "^orphanDemo",
        link: function($scope, $element, $attrs, orphanDemoCtrl){
          orphanDemoCtrl.$transclude(function(clone) {
            $element.empty();
            $element.append(clone);
          });
        }
     }
  })

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-simpleTranscludeExample-production</title>
  
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
</head>
<body ng-app="transcludeExample">
  <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>

    <!-- Angular Material Javascript using GitCDN to load directly from `bower-material/master` -->
    <script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>

<div>  
  <h3>combining md-tabs with a directive works now:</h3>
  <orphan-demo>Inner text</orphan-demo>
</div>
</body>
</html>

在指令中包装 md-tabs 会产生 "Orphan ngTransclude Directive" 错误

Wrapping md-tabs in a directive gives an "Orphan ngTransclude Directive" error

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-transclude

angular-material