ngTransclude-Anweisung funktioniert nicht, kann nicht erkennen, wo ich falsch liege

Question

Versuchen, ngTransclude zum ersten Mal zu verwenden, um benutzerdefinierte Richtlinie zu machen, um die Floating-Label-Funktionalität wie hier gezeigt zu erreichen: Floating label pattern — Angular JS, aber es funktioniert nicht.

Hier ist meine Richtlinie Code:

.directive('floatingLabel', function() { 
     return { 
      restrict: 'A', 
      scope: { 
       label: '@', 
       value: '=' 
      }, 
      transclude: true, 
      templateUrl: 'floating-label-template.html' 
     }} 
) 

Richtlinie der Vorlage:

<div class="field"> 
     <label ng-show="value" class="show-hide">{{label}}</label> 
     <div ng-transclude></div> 
</div> 

Ich versuche es auf folgende Weise zu verwenden:

<input floating-label label="Floating" value="floatingDirective" type="text" class="form-control" ng-model="floatingDirective"/> 

Plunker mit meinem Code : https://plnkr.co/edit/MC8G4H3B9zEleaBZ7ijJ?p=preview

P.S. Ich verwende AngularJS 1.4.9

Answer 1

Fixed plunker.

Lesen Sie dazu: What is ng-transclude

Richtlinie, der die Einfügemarke für die transkludierte DOM der nächsten übergeordneten Richtlinie, die Einbindung verwendet markiert.

Warum Ihr Code nicht funktioniert: Sie haben nichts 'transcluden' zu sein.

Eine allgemeine Markup-Nutzungsrichtlinie mit ng-transclude kann dies mag:

<directive-with-ng-transclude> 
    <node-to-transclude></node-to-transclude> 
</directive-with-ng-transclude> 

Nach zusammengestellt, <node-to-transclude></node-to-transclude> wird auf die Vorlage Ihrer Richtlinie angehängt werden, wo Sie ng-transclude setzen.

Hinweis: ng-model inside ng-transclude, deshalb habe ich floatingDirective eine punktierte ng-Modell verwenden.