Попытка сделать нестандартную директиву с угловыми 1.4.9, но застрял с функцией связи

Question

Прежде всего это мой plunker: https://plnkr.co/edit/JbG6vlSbeWrBcmYhmhF1?p=preview

Я пытаюсь сделать директиву, чтобы добавить плавающую ярлык, как показано в этом example к любому входу поле.

Например, у меня есть следующие поля ввода:

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

floating-label должны работать таким образом, что она будет расширять его на следующий код:

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

И я не могу этого добиться , это моя директива до сих пор:

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

Невозможно понять, как объединить wrap, prepend и append, чтобы получить желаемую структуру и как сделать ng-show работать с ng-model.

Заранее спасибо.

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>