Giá trị hiệu lực của chỉ thị AngularJS

Question

Tôi cố gắng tạo một chỉ thị cần thực hiện một số hành động khi trường nhập được đánh dấu là không hợp lệ. Ví dụ này cho phép giả sử tôi có một chỉ thị mà kiểm tra nếu đầu vào là một số nguyên tố, và tôi muốn tạo ra một chỉ thị mà thêm một lớp học để các phần tử khi nó không hợp lệ:

<input type="text" ng-model="primeNumber" validate-prime invalid-add-class="error"> 

validate-thủ sử dụng phân tích cú pháp và định dạng trên mô hình ng để cập nhật tính hợp lệ của mô hình.

Bây giờ tôi muốn chỉ thị bổ sung không hợp lệ để thêm lớp "lỗi" khi mô hình không hợp lệ và xóa nó khi hợp lệ. Nói cách khác, nó sẽ xem thuộc tính $ valid (hoặc $ invalid) của bộ điều khiển mô hình. Tuy nhiên, tôi không thể tìm ra cách để làm việc này. Tôi cố gắng:

link : function(scope, element, attrs, ctrl) { 
    ctrl.$watch("$valid", function(newVal, oldVal) { 
    //never fired 
    }); 
} 

Có lẽ tôi có thể xem một số biến trên phạm vi, nhưng tôi không biết đó là biến để xem cho.

Vậy làm thế nào tôi có thể được thông báo khi hiệu lực của mô hình thay đổi?

Answer 1

Nếu bạn có một <form>, hãy thêm name vào nó (cho phép giả định 'myForm') và name vào đầu vào của bạn (giả sử myInput). Bạn sẽ có thể $watch này bằng cách:

scope.$watch('myForm.myInput.$valid', function(validity) {}) 

Nếu bạn không có một form, bạn luôn có thể xem một hàm. Bằng cách này:

scope.$watch(function() { return ctrl.$valid; }, function(validity){}); 

Bạn có thể đọc thêm về cách tiếp cận biểu mẫu here.

Answer 2

Mục tiêu của chúng tôi, nói chung, nên làm cho một công việc chỉ thị độc lập với bất kỳ một hình thức hoặc đầu vào nào. Làm cách nào để chúng tôi có thể đọc được thuộc tính $valid cục bộ mà không ràng buộc nó với một biểu mẫu cụ thể duy nhất & tên đầu vào?

Chỉ cần sử dụng require: 'ngModel' làm một trong các thuộc tính của cấu hình chỉ thị của bạn. Điều này sẽ tiêm bộ điều khiển ngModel cục bộ làm đối số thứ tư cho hàm liên kết, và bạn có thể đặt số $watch trực tiếp trên $valid mà không cần phải thực hiện chỉ thị của từng chỉ thị cho bất kỳ biểu mẫu hoặc đầu vào cụ thể nào.

require: 'ngModel', 
link: function postLink(scope, element, attrs, controller) { 
    scope.inputCtrl = controller; 
    scope.$watch('inputCtrl.$valid', handlerFunc) 
} 

Trình xử lý phải nhất quán kích hoạt các thay đổi thành $ hợp lệ với cấu trúc đó. Xem this Fiddle, trong đó đầu vào được xác thực cho mẫu của Mã Zip hoặc Zip + 4 của Hoa Kỳ. Bạn sẽ nhận được cảnh báo mỗi lần thay đổi giá trị.

CHỈNH SỬA 3/21/14: Bài đăng này trước đây đã bị treo trên một ảo tưởng về tôi, khắc phục nguyên nhân sai của một vấn đề triển khai. Lỗi của tôi. Ví dụ trên loại bỏ sự cố định đó. Ngoài ra, thêm fiddle, cho thấy rằng phương pháp này thực tế làm việc, và luôn luôn làm, một khi bạn thêm dấu ngoặc kép xung quanh biểu thức xem.

Answer 3

Nếu bạn không có một <form /> bạn có thể dễ dàng có được một:

Trong định nghĩa Chỉ thị của bạn:

require: '^form' 

và sau đó trong chức năng liên kết của bạn, hình thức được thông qua như là tham số thứ tư:

link: function (scope, element, attr, ctrl) { 

Bây giờ bạn không cần phải mã hóa cứng dạng hoặc lĩnh vực đầu vào để thực hiện các $ đồng hồ:

scope.$watch(ctrl.$name + '.' + element.attr('name') + '.$valid', 
function (validity) {});