ngTransclude 指令不起作用，无法意识到我错在哪里答案

【问题标题】：ngTransclude directive doesn't work, can't realize where I'm wrongngTransclude 指令不起作用，无法意识到我错在哪里
【发布时间】：2016-05-15 11:45:50
【问题描述】：

第一次尝试使用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

附注我正在使用 AngularJS 1.4.9

【问题讨论】：

标签： angularjs angular-directive angularjs-ng-transclude

【解决方案1】：

固定plunker。

阅读：What is ng-transclude

为最近使用嵌入的父指令的嵌入 DOM 标记插入点的指令。

为什么你的代码不起作用：你没有什么可'transclude'。

带有ng-transclude 的use 指令的一般标记可能如下所示：

<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-model floatingDirective 的原因。

【讨论】：