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"/>

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

P.S。我使用的是AngularJS 1.4.9

Answer 1

修正了plunker。

阅读本文：What is ng-transclude

指示使用包含转义的最近父指令的转换DOM的插入点的指令。

为什么你的代码无效：你没有什么可以＆＃39; 转换＆＃39; 。

使用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，这就是我使用点缀模型floatingDirective的原因。

ngTransclude指令不起作用，无法实现我错误的地方

1 个答案: