試圖與角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>