1

私は角度が初めてで、間違ったことをしようとしているのかもしれません。

私がしようとしているのは、フォームの特定の入力フィールドの検証メッセージを表示できる検証メッセージ ディレクティブを作成することです。入力フィールドに値がない場合に備えて、必須フィールドの検証メッセージのみを表示する必要があります。

私は次のHTMLで試しました：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>    
    <form name="myForm">
  <input name="myInput" type="text" x-ng-model="object.input" required/><br/> 
  <span ng-show="myForm.myInput.$error.required" >Value required (working)</span><br/>
     <span x-msg-required="myForm.myInput"></span>
    </form>
  </body>
</html>

そしてJS：

var app = angular.module('myApp', []);
app.directive('msgRequired', function() {
  return {
    link : function(scope, element, attrs) {
      element.text('Value required');
      attrs.$set('ngShow', attrs.msgRequired + '.$error.required' );
    }
  };

});

out ディレクティブのない最初の span 要素には、期待どおりの検証メッセージが表示されます。私のディレクティブを含むスパン要素は、常に検証メッセージを表示しているようです。angularのディレクティブを理解していないことは確かです。何が欠けていますか、または角度で検証メッセージを合理化するより良い方法はありますか?

プランカーがあります: http://plnkr.co/edit/Gjvol8inw1DlWjHomZQw

4

2 に答える 2

0

したがって、これは数か月前のものですが、誰かが機能するものを探している場合に備えて:

Javascript を次のように更新しました。

var app = angular.module('myApp', []);

app.directive('msgRequired', function($compile) {
    return {
      //transclude: true,
      restrict: "A",
        link: function(scope, element, attrs) {
            element[0].innerHTML = 'Value required in angular directive';
            attrs.$set('ngShow', attrs.msgRequired + ".$error.required");

            $compile(element)(scope)
        }
    };
  });

これはうまくいくようです。しかし、私は別のプロジェクトで非常に似たようなことをしており、無限のコンパイルループを取得しています:(それを調査しています...

plnkr はここに住んでいます。

于 2013-11-18T19:45:58.630 に答える