使用角度验证自定义指令预定义错误消息

Question

我正在进行角度验证，如下所示：

<form name="form" ng-submit="vm.create(vm.job)" validation="vm.errors">
  <input name="vm.job.position" type="text" ng-model="vm.job.position" validator />

提交表单时，指令获取属性的名称，例如位置，来自ng-model。然后检查vm.errors是否有该属性的消息。如果是，则在输入后添加带有错误消息的范围。

但是，我还想以另一种方式使用相同的指令：

<form name="form" ng-submit="vm.create(vm.job)" validation="vm.errors">
  <input name="vm.job.position" type="text" ng-model="vm.job.position" />
  <span class="error" validator="position"></span>

在这种情况下，我从输入中删除了验证器并添加了跨度，这使我可以控制错误的显示位置。在这种情况下，我使用validator="position"来定义错误消息与哪个模型属性相关联。

我不确定应该如何将此功能添加到我当前的代码中...感谢任何帮助。

以下是我的指令中的所有代码：

(function () {

  "use strict";

  angular.module("app").directive("validation", validation);

  function validation() {

    var validation = {
      controller: ["$scope", controller],
      replace: false,
      restrict: "A",
      scope: {
        validation: "="
      }
    };

    return validation;

    function controller($scope) {

      var vm = this;

      $scope.$watch(function () {
        return $scope.validation;
      }, function () {
        vm.errors = $scope.validation;
      })

    }

  }

  angular.module("app").directive("validator", validator);

  function validator() {

    var validator = {
      link: link,
      replace: false,
      require: "^validation",
      restrict: "A"
    };

    return validator;

    function link(scope, element, attributes, controller) {

      scope.$watch(function () {

        return controller.errors;

      }, function () {

        if (controller.errors) {

          var result = controller.errors.filter(function (error) {

            if (error.flag == null)
              return false;

            var position = attributes.name.lastIndexOf(".");

            if (position > -1)
              return attributes.name.slice(position + 1).toLowerCase() === error.flag.toLowerCase();
            else
              return attributes.name.toLowerCase() === error.flag.toLowerCase();

          });

          if (result.length > 0) {

            var error = element.siblings("span.error").first();

            if (error.length == 0)
              element.parent().append("<span class='error'>" + result[0].info + "</span>");
            else
              error.text(result[0].info);

          } else {

            element.siblings("span.error").first().remove();

          } 

        }
      }, true);
    }
  }
})();