Có thể truyền 'bắt buộc' thành chỉ thị AngularJS không?

Question

Tôi đang tạo chỉ thị tự động hoàn thành tùy chỉnh sử dụng một số <input> trong chính nó, nhưng tôi gặp một chút khó khăn trong việc tìm hiểu cách chuyển thuộc tính 'bắt buộc' xuống, các thuộc tính khác có giá trị tôi có thể thấy nhưng 'bắt buộc 'có vẻ trống nếu được đặt hay không. Phần đầu tiên của tuyên bố trả lại của tôi bên dưới:

return { 
      restrict: 'E', 
      template: tpl, 
      replace: true, 
      scope: { 
       suggestionsPath: '=autoComplete', 
       method: '@method', 
       term: '@term', 
       required: '@required', 
       ngModel: "=" 
      }... 

thanks!

Answer 1

Tôi đã xây dựng một vài mở rộng cho đầu vào và cách tốt nhất (được cho là) ​​để mở rộng các liên kết ngModel hiện có đang sử dụng ngModelController trong chỉ thị của bạn. Bạn có thể yêu cầu một bộ điều khiển chỉ thị khác bằng cách sử dụng thuộc tính "require". documentation for ngModelController is here

Điều này sẽ cho phép bạn nhận/đặt các giá trị mô hình cũng như mở rộng hoặc thay thế hành vi xác thực nếu cần. Bởi vì bây giờ bạn có thể mở rộng trong việc kết hợp các chỉ thị đầu vào AngularJS, bạn cũng có thể muốn xem các chỉ thị đầu vào bên trong AngularJS để biết các ví dụ về cách thức hoạt động này. Họ cũng có thể làm việc trong tiếp tuyến với ngFormController như là một phụ huynh cho toàn bộ hình thức. Điều này đã cho tôi một thời gian để nắm bắt nên kiên nhẫn nhưng nó là của xa cách tốt nhất để làm điều này.

Tôi sẽ tránh phạm vi cách ly ở đây, chúng có thể phức tạp, không phải lúc nào cũng chơi tốt với các chỉ thị khác (vì vậy thường chỉ sử dụng nó trên các yếu tố mới hoặc chỉ có một chỉ thị sẽ tồn tại trên đó). Tôi sẽ thiết kế một cái gì đó như thế này:

return { 
     restrict: 'E', 
     template: tpl, 
     replace: true, 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelController) { 
      // Use attrs to access values for attributes you have set on the lement 
      // Use ngModelController to access the model value and add validation, parsing and formatting 
      // If you have an attribute that takes an expression you can use the attrs value along with $scope.$watch to check for changes and evaluate it or the $parse service if you just want to evaluate it. 
     } 

tôi khuyên bạn nên nhận như quen thuộc như bạn có thể với thiết kế chỉ thị như đầu vào tùy chỉnh có thể nhận được khá phức tạp tùy thuộc vào những gì họ làm (chúng tôi đã xây dựng được đầu vào tùy chỉnh mà thêm +/- nút như cũng như những định dạng số như tỷ lệ phần trăm, tiền tệ hoặc chỉ số bằng dấu phẩy khi bạn nhập vào chúng). Ngoài các tài liệu ngModelController đây là những hữu ích để xem xét:

• Egghead.io tutorials
• Các AngularJS mã cho input directives và forms

Answer 2

Bắt buộc có một chút thuộc tính vui nhộn (xem tại đây Setting an attribute named "required" and any value, with JQuery, doesn't work). Bạn có thể sẽ gặp rất nhiều rắc rối khi vượt qua bất kỳ loại giá trị nào thông qua việc này vì hiệu ứng của nó được xác định bởi nó có hiện diện hay không, không phải bởi giá trị của nó. Các trình duyệt khác nhau sẽ xử lý nó khác nhau và có thể viết lại giá trị.

Bạn cũng sẽ gặp khó khăn vì cả hai required và ngModel là các chỉ thị sẽ được biên soạn trên phần tử của bạn nếu chúng được cung cấp. required sẽ nói chuyện với ngModel và bạn sẽ cần triển khai ngModelproperly nếu bạn muốn mọi thứ hoạt động.

Tùy chọn đơn giản hơn là đổi tên required và ngModel thành các tên khác. ví dụ. myRequired và myNgModel. Sau đó, bạn có thể liên kết ng-model trực tiếp với scope.myNgModel và ràng buộc một ng-required đến myRequired.

Answer 3

Tôi biết đây là một câu hỏi cũ, nhưng đối với những người đi tìm (mà là cách tôi đã kết thúc ở đây):

bạn có thể chuyển thẻ bắt buộc cho chỉ thị để đọc dưới dạng boolean và sau đó sử dụng giá trị đó theo yêu cầu.

return { 
    restrict: 'E', 
    template: tpl, 
    replace: true, 
    scope { 
     required:'@' 
    } 

Sau đó, trong mẫu chỉ thị của bạn, bạn sẽ sử dụng nó như

<input type="text" ng-required="required" /> 

Hoặc là thuộc tính 'cần thiết' được tìm thấy và sau đó được thiết lập là true trong chỉ thị, hoặc các thuộc tính không được tìm thấy mà sẽ được giải thích bởi ng-required dưới dạng giá trị false