Der Versuch, benutzerdefinierte Richtlinie mit kantigem 1.4.9 zu machen, aber mit Link-Funktion

Question

allererst diese stecken ist mein Plunker: https://plnkr.co/edit/JbG6vlSbeWrBcmYhmhF1?p=preview

Ich versuche Richtlinie zu machen Floating-Label hinzuzufügen, wie in diesem example einem Eingang gezeigt Feld.

Zum Beispiel habe ich folgende Eingabefeld:

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

floating-label sollte in einer solchen Art und Weise arbeiten, dass sie es dem folgenden Code erweitern:

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

Und ich dies nicht erreichen kann, , das ist meine Richtlinie so weit:

.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); 
      } 
     }} 
) 

Kann nicht erkennen, wie 012 zu kombinieren, prepend und append erhalten gewünschte Struktur und wie man ng-show arbeitet mit ng-model Wert.

Vielen Dank im Voraus.

Answer 1

Ich würde eine leichte Umstrukturierung empfehlen, um diese Arbeit zu machen plunkr.

Ich denke, Ihre Anweisung sollte die Eingabe und das Etikett erstellen, so dass Sie sich nicht um die Link-Funktion sorgen müssen und Sie den Bereich besser kontrollieren können. Das würde so aussehen ...

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>` 
     } 
} 
) 

Dann in Ihrem HTML Sie dies nur tun ...

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