角指令屬性添加到元素

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