Ý nghĩa của request: 'ngModel' là gì?

Đây là HTML cho chỉ thị của tôi:

<textarea data-modal="modal" data-mydir ng:model="abc"></textarea>

Trong chỉ thị của tôi, tôi có điều này:

return {
        require: 'ngModel',
        replace: true,
        scope: {
            modal: '=modal',
            ngModel: '=',
            pid: '=pid'
        },

Ai đó có thể cho tôi biết, tầm quan trọng của request: 'ngModel' là gì? Tôi thấy điều này trong nhiều chỉ thị khác nhau. Tôi có thể gọi đây là data-modal không?

Tôi bối rối vì khi tôi thay đổi nó thành data-modal, tôi nhận được thông báo từ Angular nói rằng

Controller 'ngModel', required by directive 'textarea', can't be found!

Các require cung cấp cho bạn bộ điều khiển cho chỉ thị mà bạn đặt tên là đối số thứ tư cho linkhàm của bạn . (Bạn có thể sử dụng ^để tìm kiếm bộ điều khiển trên phần tử mẹ; ?làm cho nó trở thành tùy chọn.) Vì vậy, require: 'ngModel'cung cấp cho bạn bộ điều khiển cho ngModelchỉ thị, là mộtngModelController .

Bộ điều khiển chỉ thị có thể được viết để cung cấp các API mà các chỉ thị khác có thể sử dụng; với ngModelController, bạn có quyền truy cập vào chức năng đặc biệt được tích hợp sẵn ngModel, bao gồm cả việc nhận và thiết lập giá trị. Hãy xem xét ví dụ sau:

<input color-picker ng-model="project.color">

app.directive('colorPicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      element.colorPicker({
        // initialize the color to the color on the scope
        pickerDefault: scope.color,
        // update the ngModel whenever we pick a new color
        onColorChange: function(id, newValue) {
          scope.$apply(function() {
            ngModel.$setViewValue(newValue);
          });
        }
      });

      // update the color picker whenever the value on the scope changes
      ngModel.$render = function() {
        element.val(ngModel.$modelValue);
        element.change();                
      };
    }
  }
});

Lệnh này sử dụng ngModelbộ điều khiển để lấy và đặt giá trị của màu từ trình chọn màu. Xem ví dụ JSFiddle này: http://jsfiddle.net/BinaryMuse/AnMhx/

Nếu bạn đang sử dụng require: 'ngModel' , có lẽ bạn nên không còn được sử dụng ngModel: '='trong phạm vi cô lập của bạn; những ngModelControllercung cấp cho bạn tất cả các truy cập bạn cần phải thay đổi giá trị.

Ví dụ dưới cùng trên trang chủ AngularJS cũng sử dụng chức năng này (ngoại trừ việc sử dụng bộ điều khiển tùy chỉnh ngModel).

Đối với cách viết hoa của một chỉ thị, ví dụ: ngModelvs ng-modelvs data-ng-model: trong khi Angular hỗ trợ sử dụng nhiều biểu mẫu trên DOM, khi bạn tham chiếu đến một chỉ thị bằng tên (ví dụ: khi tạo một chỉ thị hoặc sử dụng require), bạn luôn sử dụng LowerCamelCase hình thức của tên.

Như đã nêu trong tài liệu Tạo Chỉ thị Tùy chỉnh : (Trước hết cho câu hỏi của bạn trong nhận xét)

Tôi có thể có một data-ng-modelthay thế?

Câu trả lời:

Phương pháp hay nhất : Thích sử dụng định dạng được phân tách bằng dấu gạch ngang (ví dụ: ng-bindfor ngBind). Nếu bạn muốn sử dụng một công cụ xác thực HTML, thay vào đó bạn có thể sử dụng dataphiên bản -đã sửa lỗi (ví dụ: data-ng-bindfor ngBind). Các biểu mẫu khác hiển thị ở trên được chấp nhận vì lý do kế thừa nhưng chúng tôi khuyên bạn nên tránh chúng.

Ví dụ:

<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>

Thứ hai, ?ngModelđại diện cho cái gì?

// Always use along with an ng-model
require: '?ngModel',

Khi sử dụng chỉ thị của bạn, nó buộc nó phải được sử dụng cùng với thuộc tính / bộ điều khiển ng-model.

Sự requirethiết lập

(Trích sách AngularJS của Brad Green & Shyam Seshadri)

Các chỉ thị khác có thể có bộ điều khiển này được chuyển cho chúng với cú pháp thuộc tính request. Hình thức đầy đủ của yêu cầu trông giống như:

require: '^?directiveName'

Các tùy chọn:

1. directiveName

   Tên dựa trên lạc đà này chỉ định chỉ thị mà bộ điều khiển sẽ đến từ. Vì vậy, nếu <my-menuitem>chỉ thị của chúng tôi cần tìm một bộ điều khiển trên cha của nó <my-menu>, chúng tôi sẽ viết nó là myMenu.

2. ^

   Theo mặc định, Angular lấy bộ điều khiển từ chỉ thị được đặt tên trên cùng một phần tử. Việc thêm ^biểu tượng tùy chọn này cho biết cũng đi bộ lên cây DOM để tìm chỉ thị. Ví dụ, chúng ta cần thêm biểu tượng này; chuỗi cuối cùng sẽ là ^myMenu.

3. ?

   Nếu không tìm thấy bộ điều khiển cần thiết, Angular sẽ đưa ra một ngoại lệ để cho bạn biết về sự cố. Việc thêm một ?ký hiệu vào chuỗi nói rằng bộ điều khiển này là tùy chọn và không nên ném một ngoại lệ nếu không tìm thấy. Mặc dù nghe có vẻ khó xảy ra, nhưng nếu chúng ta muốn <my-menu-item>sử dụng s mà không có vùng <mymenu>chứa, chúng ta có thể thêm nó vào một chuỗi yêu cầu cuối cùng là ?^myMenu.

các require:'ngModel'vàrequire:'^ngModel' cho phép bạn bơm mô hình gắn liền với các yếu tố hoặc thành phần mẹ của nó mà trên đó chỉ là ràng buộc để.

Về cơ bản, nó là cách dễ nhất để truyền ngModel vào chức năng liên kết / biên dịch thay vì chuyển nó bằng tùy chọn phạm vi. Khi bạn có quyền truy cập vào ngModel, bạn có thể thay đổi giá trị của nó bằng cách sử dụng $setViewValue, làm cho nó bẩn / sạch bằng cách sử dụng $formatters, áp dụng trình theo dõi, v.v.

Dưới đây là một ví dụ đơn giản để truyền ngModel và thay đổi giá trị của nó sau 5 giây.

Demo: http://jsfiddle.net/t2GAS/2/

myApp.directive('myDirective', function($timeout) {
  return {
    restrict: 'EA',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
        ngModel.$render = function() {
            $timeout(function() {
                ngModel.$setViewValue('StackOverflow');  
            }, 5000);                
        };
    }
  };
});