角指令属性添加到元素

Question

我有一个表格以下HTML /角码：

<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> 

注意

当校验，误差不存在，则默认将是“错误的”，所以我会得到：

<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

该指令工作中。我想添加几件事情：

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

   在指令 “scope.model.errors” 将是 “scope.allErrorsToDisplay”。

2. 我是否需要观察所有范围？我只能看model.errors吗？ 或考虑（1），观察“验证错误”中的变量？

这里是我当前的代码：

angular.module（ '应用'）

.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