Wrapping md-Tabs in einer Direktive gibt eine "Orphan ngTransclude Directive" Fehler

Ich möchte eine Direktive erstellen, die md-tabs umschließt, aber ich bekomme einen Fehler, "Orphan ngTransclude Directive". Ich habe den Fehler in diesem Snippet repliziert:Wrapping md-Tabs in einer Direktive gibt eine "Orphan ngTransclude Directive" Fehler

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>

ich this answer gefunden, die in von Hand bekommen Elemente außerhalb der Schablone zu manipulieren, aber ich hoffe, für ein sauberere „kantige“ Art und Weise . Was ist denn hier los? Gibt es einen Weg, ich kann definieren, welche Richtlinie die ng-transclude gelten soll?

Quelle

2016-06-30 adamdport

IIRC ich hatte das gleiche Problem und es fixiert zu Angular 1.5.5 aktualisiert –

Gerade versucht mein Beispiel die Aktualisierung zu verwenden 1.5.6 und haben das gleiche Problem, http://errors.angularjs.org/1.5.6/ngTransclude/orphan?p0=%3Cng-transclude%20class%3D%22ng-scope%22%3E – adamdport

This comment on github präsentiert die Lösung. ng-transclude ist so konzipiert, dass es generisch ist, so dass es mit jeder Direktive funktionieren kann, aber in diesem Fall kommt das Problem daher. Glücklicherweise ist es sehr einfach nachzuahmen, und wir können angeben, auf welches Elternelement es mit require angewendet werden soll.

Ich habe meinen Code-Schnipsel mit einer Arbeitslösung aktualisiert:

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>

Quelle

2016-07-05 14:01:16 adamdport

Wrapping md-Tabs in einer Direktive gibt eine "Orphan ngTransclude Directive" Fehler

Antwort

Verwandte Themen