は角1.4.9でカスタムディレクティブを作成しようとしているが、リンク関数で立ち往生

Question

このすべての

まず私のplunkerですフィールド。例えば

私は、次の入力フィールドがあります。

<div class="field"> 
     <label ng-show="betterField" class="show-hide">Better field</label> 
     <input type="text" class="form-control" ng-model="betterField" placeholder="Better field"/> 
</div> 

そして、私はこれを達成することはできません。

<input floating-label placeholder="Better field" type="text" class="form-control" ng-model="floatingDirective"/> 

floating-labelは、それが次のコードにそれを拡大するように動作するはずですこれはこれまでの私の指示です：

.directive('floatingLabel', function ($compile) { 
     return { 
      restrict: 'A', 
      require: 'ngModel', 
      scope: { 
       ngModel: '=' 
      }, 
      link: function(scope, element, attrs, ctrl, transclude) { 
       var wrapper = '<div class="field">' + 
           '</div>'; 

       element.after($compile('<label ng-show="' + attrs.ngModel + '" class="show-hide">' + attrs.placeholder + '</label>')(scope)); 
       element.wrap(wrapper); 
      } 
     }} 
) 

012をどのように組み合わせるか分かりません,prependおよびappendを使用して、ng-modelの値を使用してng-showの作業を行います。

ありがとうございます。

Answer 1

私はこの仕事をするために若干の再構成をお勧めします。plunkr

あなたの指示は入力とラベルの作成を処理する必要があるので、リンク機能について心配する必要がなく、範囲をよりよく制御できると思います。すなわち、このようになります...

angular.module('baseapp.directives',[]) 
angular.module('baseapp.directives') 
.directive('floatingLabelInput', function(){ 
     return { 
      restrict: 'E', 
      scope: { 
       ngModel: '=', 
       placeholder: '@' 
      }, 
      template: `<div class="field"><input floating-label placeholder="Better field" type="text" class="form-control" ng-model="ngModel"/><label ng-show="ngModel" class="show-hide">{{placeholder}}</label></div>` 
     } 
} 
) 

は、その後、あなたのhtmlであなただけのこの操作を行う...

<floating-label-input ng-model="floatingDirective" placeholder="Better field"></floating-label-input>