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

Question

正在尝试使用 ngTransclude first time to make custom directive, to achieve the floating label functionality as shown here: 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

Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.

为什么你的代码不起作用：你没有什么可做的 '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.

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

ngTransclude directive doesn't work, can't realize where I'm wrong

angularjs

angular-directive

angularjs-ng-transclude