Cách thêm các thuộc tính xác nhận trong chỉ thị angularjs

Question

Tôi đang cố viết một chỉ thị góc để thêm các thuộc tính xác thực vào thẻ, nhưng nó dường như không hoạt động. Đây là bản demo của tôi. Bạn sẽ nhận thấy rằng "Có hiệu lực" vẫn đúng nếu bạn xóa văn bản trong hộp nhập thứ hai, nhưng chuyển thành false nếu bạn xóa văn bản trong hộp nhập đầu tiên.

http://plnkr.co/edit/Rr81dGOd2Zvio1cLYW8D?p=preview

Dưới đây là chỉ thị của tôi:

angular.module('demo', []) 
.directive('metaValidate', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      element.attr("required", true); 
     } 
    }; 
}); 

Tôi đoán tôi chỉ thiếu một cái gì đó đơn giản.

Answer 1

Tất cả quy tắc để xác thực biểu mẫu đang được đọc trong giai đoạn biên dịch biểu mẫu, vì vậy sau khi thực hiện thay đổi trong nút con, bạn cần biên dịch lại form chỉ thị (form đó là chỉ thị tùy chỉnh trong AngularJS). Nhưng chỉ thực hiện một lần, tránh các vòng lặp vô hạn (chức năng 'liên kết' của chỉ thị của bạn sẽ được gọi lại sau khi biên dịch biểu mẫu).

angular.module('demo', []) 
.directive('metaValidate', function ($compile) { 
    return { 
     restrict: 'A', 
     link: function (scope,element, attrs) { 
      if (!element.attr('required')){ 
      element.attr("required", true); 
      $compile(element[0].form)(scope); 
      } 
     } 
    }; 
}); 

plunker làm việc: http://plnkr.co/edit/AB6extu46W4gFIHk0hIl?p=preview

Answer 2

Tôi biết điều này là khá một câu hỏi cũ, nhưng đối với những gì nó có giá trị, các tài liệu mô tả góc ng-required mà phải mất một giá trị boolean. Điều này giải quyết một vấn đề tương tự như tôi đã có.

http://docs.angularjs.org/api/ng/directive/input

Answer 3

Hãy cẩn thận của vòng lặp vô hạn và recompiles, một giải pháp tốt hơn là ở đây: Add directives from directive in AngularJS

angular.module('app') 
    .directive('commonThings', function ($compile) { 
    return { 
     restrict: 'A', 
     terminal: true, //this setting is important to stop loop 
     priority: 1000, //this setting is important to make sure it executes before other directives 
     compile: function compile(element, attrs) { 
     element.attr('tooltip', '{{dt()}}'); 
     element.attr('tooltip-placement', 'bottom'); 
     element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop 
     element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html 

     return { 
      pre: function preLink(scope, iElement, iAttrs, controller) { }, 
      post: function postLink(scope, iElement, iAttrs, controller) { 
      $compile(iElement)(scope); 
      } 
     }; 
     } 
    }; 
    }); 

plunker Làm việc có sẵn tại địa chỉ: http://plnkr.co/edit/Q13bUt?p=preview