ngTranscludeディレクティブが機能しない、どこが間違っているのかわからない

Question

ngTransclude初めて、カスタムディレクティブを作成しようとしました。フローティングラベル機能を達成するために、Floating label pattern — Angular JSが動作します。ここで

は私の指示コードです：

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

指令のテンプレート：私のコードで

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

Plunker：私は次のようにそれを使用しようとしている

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

：https://plnkr.co/edit/MC8G4H3B9zEleaBZ7ijJ?p=preview

P.S.私はAngularJSを使います。1.4.9

Answer 1

固定plunkerです。

この読み：トランスクルーを使用して最も近い親ディレクティブのトランスクルードDOMのための挿入点をマークWhat is ng-transclude

指令を。

あなたのコードが動作しないのはなぜ：あなたは'transclude'なることは何もありません。

ng-transcludeで使用するディレクティブの一般的なマークアップは、このようなことがあり：コンパイル後

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

を、<node-to-transclude></node-to-transclude>はあなたがng-transcludeを入れて、あなたのディレクティブのテンプレートに追加されます。

お知らせ：ng-model inside ng-transcludeです。そのため、私はドット付きngモデルfloatingDirectiveを使用しています。