ngTransclude指令不起作用，無法實現我錯在哪裏

Question

嘗試使用ngTransclude第一次製作自定義指令，實現浮動標籤功能，如下所示：Floating label pattern — Angular JS，但它不起作用。

這裏是我的指令代碼：

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

指令的模板：

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

我想通過以下方式來使用它：

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

Plunker我的代碼：https://plnkr.co/edit/MC8G4H3B9zEleaBZ7ijJ?p=preview

P.S.我正在使用AngularJS 1.4.9

Answer 1

固定plunker。

閱讀：What is ng-transclude

指令，標誌着使用transclusion最近的父指令的transcluded DOM插入點。

爲什麼你的代碼不工作：你有什麼要'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。