エラーメッセージを表示する指示

Question

私は検証をセットアップしており、エラーを表示するためにngMessagesを使用しています。しかし、私はngMessagesの周りにいくつかのHTMLを追加する（多くのコードの重複を避けるために）ラッパーディレクティブを作成したいと思います。

が

<div class="help-block validator"> 
    <div ng-messages="registerForm.email.$error" ng-if="registerForm.email.$touched"> 
     <p ng-message="required">This field is required.</p> 
    </div> 
</div> 

私はちょうどこのような何かを書きたい：：

だからではなく、各入力にこれを記述することの

<error-message messages='{"required": "This field is required."}' error="registerForm.email.$error" touched="registerForm.email.$touched"></error-message> 

私のディレクティブを使用して問題がerrorとtouchedが出てくるということです文字列としてJS式として評価されません。私は$evalにしようとしましたが、それはエラーを投げます。

は、ここに私のディレクティブです：

angular 
    .module('myApp') 
    .directive("errorMessage", function() { 
     return { 
      restrict: "E", 
      replace: true, 
      scope: { 
       'messages': '=', 
       'error': '=', 
       'touched': '=' 
      }, 
      template: '<div class="help-block validator">' + 
       '<div ng-messages="error" ng-if="touched">' + 
        '<div ng-repeat="(key, message) in messages">' + 
         '<p ng-message="key">{{message}}</p>' + 
        '</div>' + 
       '</div>' + 
      '</div>', 
      link: function (scope, elem, attrs) { 
       scope.error = attrs.error; 
       scope.touched = attrs.touched; 
       scope.messages = scope.$eval(attrs.messages); // this works 
      } 
     }; 
    }); 

私はこれをやって行くべきか任意のアイデア？

Answer 1

問題が見つかりました。 attrsのように私が必要なものではなかった。プロパティは既にscopeにありました。私が結んだコードは次のとおりです：

angular 
    .module('myApp') 
    .directive("errorMessage", function() { 
     return { 
      restrict: "E", 
      replace: true, 
      scope: { 
       'messages': '=', 
       'error': '=', 
       'touched': '=' 
      }, 
      template: '<div class="help-block validator">' + 
       '<div ng-messages="error" ng-if="touched">' + 
        '<div ng-repeat="(key, message) in messages">' + 
         '<p ng-message="{{key}}">{{message}}</p>' + 
        '</div>' + 
       '</div>' + 
      '</div>', 
      link: function (scope, elem, attrs) { 

      } 
     }; 
    }); 

Answer 2

私は​​3210があなたの要件を満たしていると思います。私たちは新しいhtmlファイルを作成し、このファイルに私たちのすべてのメッセージを置き、ng-messages-includeでそれを呼び出すことができます。

希望私の答えはあなたのために使用可能です。