ディレクティブを使用して別のエラーメッセージを表示します。 Angular.js

Question

私はディレクティブで検証を行っているため、ユーザーはボックスにチェックを入れなければなりません。チェックボックスが選択されていないと、エラーメッセージが表示されます。私の問題は、メッセージがチェックボックスのテキストに移動することです。

style="margin-top:5px;color:red;" 

は、私はそれがプレゼンテーションに影響を与えたくないcheckbox.Butの最後に検証メッセージを必要とするか、このメッセージは、他の要素の上にあること。私はディレクティブでこれを実行する必要が

style="position: absolute;margin-top:5px;color:red;" 

、私はコントローラまたはテンプレートを触れたくありません。どのようにそれを行うことができますか？

app.directive('validate', function ($timeout) { 

     return { 
      restrict: 'AE', 
      require: 'ngModel', 

      link: function (scope, element, attrs, ngModel) { 
       if (!ngModel){ 
       return;   
       } 
       ngModel.$setValidity('validation', false); 

       scope.directive_function= function(){ 
       alert("directive function"); 
       } 

       ngModel.$parsers.push(function(val){ 
       if(val==true){ 
        ngModel.$setValidity('validation', true); 
        var elemento_eliminar=(angular.element((document.getElementById('errorchec')))); 
        elemento_eliminar.remove(); 
       }else{ 
       ngModel.$setValidity('validation', false); 
       var newDirective = angular.element('<div id="errorchec" class="span_wrong" style="margin-top:5px;color:red;">'+"must be required"+'</div>'); 
       //style="position: absolute;margin-top:5px;color:red;" 
       element.after(newDirective); 
       } 
       }) 
      } 


     }; 
    }); 

http://jsfiddle.net/2kt4ukcx/

Answer 1

、それはあなたのための適切なソリューションだ場合、それは私のために動作しないstyle="position:absolute; top:5px;color:red;