Question

我在表单上有以下HTML / Angular代码：

<span class="error" ng-if="model.errors['message.email']" ng-bind="model.errors['message.email'][0]"></span>

我想使用更少的代码，因此以下内容将呈现相同的内容：

<span class="error" model-validator="message.email" validator-errors="model.errors"></span>

注意

当验证器错误不存在时，默认值为＆＃34;错误＆＃34;所以我会得到：

<span class="error" ng-if="errors['message.email']" ng-bind="errors['message.email'][0]"></span>

UPTATE 1

我尝试了以下内容：

.directive('modelValidator', function () {

  return {
    restrict: 'A',
    replace: false,
    link: function (scope, element, attrs) {

      var validator = element.attr('model-validator');
      if (validator === "null")
        return;

      var errors = element.attr('validator-errors');

      element.attr('data-ng-if', errors + "['" + validator + "']");

      element.attr('data-ng-bind', errors + "['" + validator + "'][0]");

    }
  };

但这不是添加属性......

更新2

该指令正在运作。我想补充几点：

如何使用属性指定哪个变量包含错误？

在指令＆＃34; scope.model.errors＆＃34;将是＆＃34; scope.allErrorsToDisplay＆＃34;。
我是否需要观看所有范围？我只能观看model.errors吗？或者考虑（1），在＆＃34;验证器 - 错误中观察变量＆＃34;？

这是我目前的代码：

angular.module（＆＃39;应用＆＃39）

.directive('validator', function () {

  return {
    restrict: 'A',
    replace: false,
    link: function (scope, element, attribute) {

      scope.$watch(function () {

        if (scope.model.errors) {
          if (scope.model.errors[attribute.validator]) {
            element.show();
            element.text(scope.model.errors[attribute.validator][0]);
          } else
            element.hide();
        } else
          element.hide();

      });
    }
  }
});

更新3

这似乎可以做我需要的一切。有没有人有任何改进建议？

angular.module('app')

  .directive('validator', ['$parse', function ($parse) {

    return {
      restrict: 'A',
      replace: false,
      link: function (scope, element, attributes) {                

        scope.$watch(function () {

          var errors = $parse('validatorErrors' in attributes ? attributes["validatorErrors"] : 'model.errors')(scope);

          if (errors) {
            if (errors[attributes.validator]) {
              element.show();
              element.text(errors[attributes.validator][0]);
            } else
              element.hide();
          } else
            element.hide();

        });
      }
    }
  }]);

Answer 1

我认为你的方法太复杂了。指令的强大之处在于您不必添加其他指令来完成您想要的任务。如果我正确理解您的问题，您希望元素在错误存在时显示消息。 How about this?

<!-- html -->
<div ng-controller="mainController">
  <div validate="email"></div>
  <div validate="name"></div>
</div>

// controller
function mainController ($scope) { 
  $scope.model = {
    errors: {
      email: 'Your email is invalid!'
    , name: undefined
    }
  } 
}

// directive
function validate () {
  return {
    restrict: 'A'
  , replace: false
  , link: function (scope, elem, attr) {
      if (scope.model.errors[attr.validate]) {
        elem.text(scope.model.errors[attr.validate]);
      }
    }
  } 
}

<强> codepen

用于向元素添加属性的Angular指令

1 个答案: