Директива для отображения сообщений об ошибках

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

Я думаю, ng-message-include отвечает вашим требованиям. мы можем создать новый html-файл и разместить все наши сообщения в этом файле и просто вызвать его с помощью ng-messages-include.

надеюсь, что мой ответ будет полезен для вас.