ความหมายของ require: 'ngModel'?

นี่คือ HTML สำหรับคำสั่งของฉัน:

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

ในคำสั่งของฉันฉันมีสิ่งนี้:

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

ใครช่วยบอกหน่อยได้ไหมว่าความต้องการ: 'ngModel' มีความสำคัญอย่างไร ฉันเห็นสิ่งนี้ในคำสั่งต่างๆมากมาย ฉันสามารถเรียกสิ่งนี้ว่า data-modal ได้ไหม

ฉันสับสนเพราะเมื่อฉันเปลี่ยนเป็น data-modal ฉันได้รับข้อความจาก Angular ว่า

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

requireการเรียนการสอนจะช่วยให้คุณควบคุมสำหรับสั่งคุณชื่อเป็นอาร์กิวเมนต์ที่สี่ที่คุณlinkฟังก์ชั่น (คุณสามารถใช้^เพื่อค้นหาคอนโทรลเลอร์ในองค์ประกอบหลัก?ทำให้เป็นทางเลือก) ดังนั้นจึงrequire: 'ngModel'ให้ตัวควบคุมสำหรับngModelคำสั่งซึ่งเป็นngModelControllerไฟล์.

สามารถเขียน Directive controllers เพื่อจัดเตรียม API ที่คำสั่งอื่นใช้ได้ ด้วยngModelControllerคุณจะสามารถเข้าถึงฟังก์ชันพิเศษที่มีอยู่ภายในngModelรวมถึงการรับและตั้งค่า พิจารณาตัวอย่างต่อไปนี้:

<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();                
      };
    }
  }
});

คำสั่งนี้ใช้ngModelคอนโทรลเลอร์เพื่อรับและตั้งค่าของสีจาก colorpicker ดูตัวอย่าง JSFiddle นี้: http://jsfiddle.net/BinaryMuse/AnMhx/

หากคุณกำลังใช้require: 'ngModel'คุณอาจจะไม่ได้นอกจากนี้ยังจะใช้ngModel: '='ในขอบเขตแยกของคุณ ngModelControllerช่วยให้คุณเข้าถึงทุกที่คุณจำเป็นต้องเปลี่ยนค่า

ตัวอย่างด้านล่างในโฮมเพจ AngularJSยังใช้ฟังก์ชันนี้ (ยกเว้นการใช้คอนโทรลเลอร์แบบกำหนดเองไม่ใช่ngModel)

สำหรับปลอกของคำสั่งตัวอย่างเช่นngModelvs ng-modelvs data-ng-model: ในขณะที่ Angular รองรับการใช้หลายรูปแบบบน DOM เมื่อคุณอ้างถึงคำสั่งตามชื่อ (ตัวอย่างเช่นเมื่อสร้างคำสั่งหรือใช้require) คุณจะใช้ lowerCamelCase เสมอ รูปแบบของชื่อ

ตามที่ระบุไว้ในเอกสารการสร้างคำสั่งที่กำหนดเอง : (ประการแรกสำหรับคำถามของคุณในความคิดเห็น)

ฉันขอdata-ng-modelแทนได้ไหม

คำตอบ:

แนวทางปฏิบัติที่ดีที่สุด : ชอบใช้รูปแบบที่คั่นด้วยเส้นประ (เช่นng-bindสำหรับngBind) หากคุณต้องการใช้เครื่องมือตรวจสอบ HTML คุณสามารถใช้data-prefixed เวอร์ชันแทนได้ (เช่นdata-ng-bindสำหรับngBind) แบบฟอร์มอื่น ๆ ที่แสดงไว้ข้างต้นได้รับการยอมรับเนื่องจากเหตุผลเดิม แต่เราแนะนำให้คุณหลีกเลี่ยง

ตัวอย่าง:

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

ประการที่สอง?ngModelหมายถึงอะไร?

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

ng-modelเมื่อใช้คำสั่งของคุณมันบังคับให้มีการใช้พร้อมกับคุณลักษณะ / ควบคุม

การrequireตั้งค่า

(สารสกัดจากหนังสือ AngularJS โดย Brad Green & Shyam Seshadri)

คำสั่งอื่น ๆ สามารถให้คอนโทรลเลอร์นี้ส่งผ่านไปยังพวกเขาด้วยไวยากรณ์คุณสมบัติที่ต้องการ รูปแบบทั้งหมดของความต้องการมีลักษณะดังนี้:

require: '^?directiveName'

ตัวเลือก:

1. directiveName

   ชื่อที่หุ้มด้วยอูฐนี้ระบุคำสั่งที่ผู้ควบคุมควรมาจาก ดังนั้นหาก<my-menuitem>คำสั่งของเราต้องการค้นหาคอนโทรลเลอร์บนพาเรน<my-menu>ต์เราจะเขียนเป็น myMenu

2. ^

   ตามค่าเริ่มต้น Angular จะรับตัวควบคุมจากคำสั่งที่มีชื่อในองค์ประกอบเดียวกัน การเพิ่ม^สัญลักษณ์ที่เป็นทางเลือกนี้เป็นการบอกว่าจะเดินขึ้นต้นไม้ DOM เพื่อค้นหาคำสั่ง ตัวอย่างเช่นเราต้องเพิ่มสัญลักษณ์นี้ ^myMenuสตริงสุดท้ายจะเป็น

3. ?

   หากไม่พบคอนโทรลเลอร์ที่ต้องการ Angular จะแสดงข้อยกเว้นเพื่อแจ้งให้คุณทราบเกี่ยวกับปัญหา การเพิ่ม?สัญลักษณ์ให้กับสตริงบอกว่าคอนโทรลเลอร์นี้เป็นทางเลือกและไม่ควรทิ้งข้อยกเว้นหากไม่พบ แม้ว่าจะฟังดูไม่น่าเป็นไปได้ แต่ถ้าเราต้องการปล่อยให้<my-menu-item>ใช้โดยไม่มี<mymenu>คอนเทนเนอร์เราสามารถเพิ่มสิ่งนี้สำหรับสตริงสุดท้ายที่ต้องการ?^myMenuได้

require:'ngModel'และrequire:'^ngModel'ช่วยให้คุณสามารถที่จะฉีดรุ่นที่แนบมากับองค์ประกอบหรือองค์ประกอบแม่ที่สั่งถูกผูกไว้กับ

โดยพื้นฐานแล้วเป็นวิธีที่ง่ายที่สุดในการส่ง ngModel ไปยังฟังก์ชันลิงก์ / คอมไพล์แทนที่จะส่งผ่านโดยใช้ตัวเลือกขอบเขต เมื่อคุณเข้าถึง ngModel แล้วคุณสามารถเปลี่ยนค่าโดยใช้$setViewValueทำให้สกปรก / สะอาดโดย$formattersใช้ผู้เฝ้าดู ฯลฯ

ด้านล่างนี้เป็นตัวอย่างง่ายๆในการส่งผ่าน ngModel และเปลี่ยนค่าหลังจากผ่านไป 5 วินาที

การสาธิต: 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);                
        };
    }
  };
});