आवश्यकता का अर्थ क्या है: 'ngModel'?

Question

यह मेरे निर्देशन के लिए HTML है:

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

मेरे निर्देशन में मेरे पास यह है:

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

क्या कोई मुझे बता सकता है, आवश्यकता का क्या महत्व है: 'एनकोडेल'? मैं इसे कई अलग-अलग निर्देशों में देखता हूं। क्या मैं इस डेटा-मोडल को कॉल कर सकता हूं?

मैं भ्रमित हूं क्योंकि जब मैं इसे डेटा-मोडल में बदलता हूं तो मुझे एंगुलर कहा से संदेश मिलता है

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

Comments

जहां कहीं भी इस निर्देश का उपयोग कर रहे हैं वहाँ एक विशेषता के रूप में परिभाषित किया जाना चाहिएng-model='property'

— Chandermani

क्या मेरे बजाय डेटा-एनजी-मॉडल हो सकता है? मैं कभी-कभी क्यों देखता हूं: "आवश्यकता है: '? NgModel'," यह भ्रामक है।

Answer 1

requireअनुदेश आप निर्देश है कि आप अपने को चौथा तर्क के रूप में नाम के लिए नियंत्रक देता linkकार्य करते हैं। (आप ^मूल तत्व पर नियंत्रक को देखने के लिए उपयोग कर सकते हैं , ?इसे वैकल्पिक बनाता है।) तो require: 'ngModel'आपको ngModelनिर्देश के लिए नियंत्रक देता है , जो किngModelController ए ।

निर्देश नियंत्रक को एपीआई प्रदान करने के लिए लिखा जा सकता है जिसे अन्य निर्देश उपयोग कर सकते हैं; के साथ 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();                
      };
    }
  }
});

यह निर्देश ngModelcolorpicker से रंग का मान प्राप्त करने और सेट करने के लिए नियंत्रक का उपयोग करता है । इस JSFiddle उदाहरण देखें: http://jsfiddle.net/BinaryMuse/AnMhx/

यदि आप उपयोग कर रहे हैं require: 'ngModel', तो आपको संभवतः अपने अलग-अलग दायरे में भी उपयोग नहीं करना चाहिए ngModel: '='; ngModelControllerआप सभी का उपयोग आप मूल्य बदलने की जरूरत है देता है।

AngularJS होमपेज पर नीचे का उदाहरण भी इस कार्यक्षमता का उपयोग करता है (एक कस्टम नियंत्रक का उपयोग करने के अलावा, नहीं ngModel)।

---

एक निर्देशन के आवरण के लिए, उदाहरण के लिए, ngModelबनाम ng-modelबनाम data-ng-model: जबकि एंगुलर डोम पर कई रूपों का उपयोग करने का समर्थन करता है, जब आप नाम से एक निर्देश का उल्लेख करते हैं (उदाहरण के लिए, एक निर्देश बनाते समय, या उपयोग करते हुए require), तो आप हमेशा लोअरकेस का उपयोग करें नाम का रूप।

Comments

वहाँ एक विशेष कारण require: 'ngModel'से अधिक इस्तेमाल किया जाना चाहिए ngModel: '='?

— एरिकग्रिफिन

Answer 2

जैसा कि कस्टम डायरेक्शंस के डॉक्यूमेंट में कहा गया है : (सबसे पहले टिप्पणी में आपका सवाल)

क्या मुझे 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 से निकालें )

अन्य निर्देशों में यह नियंत्रक आवश्यक संपत्ति सिंटैक्स के साथ उनके पास हो सकता है । आवश्यकता का पूर्ण रूप इस तरह दिखता है:

require: '^?directiveName'

विकल्प:

1. directiveName

   यह ऊंट-आवरण नाम निर्दिष्ट करता है कि नियंत्रक को किस निर्देश से आना चाहिए। इसलिए अगर हमारे <my-menuitem>निर्देश को इसके मूल पर नियंत्रक खोजने की आवश्यकता है <my-menu>, तो हम इसे myMenu के रूप में लिखेंगे।

2. ^

   डिफ़ॉल्ट रूप से, कोणीय को उसी तत्व पर नामित निर्देश से नियंत्रक मिलता है। इस वैकल्पिक ^प्रतीक को जोड़ने से यह भी कहा जाता है कि डायरेक्शन को खोजने के लिए DOM ट्री को भी चलना चाहिए। उदाहरण के लिए, हमें इस प्रतीक को जोड़ना होगा; अंतिम तार होगा ^myMenu।

3. ?

   यदि आवश्यक नियंत्रक नहीं मिला है, तो कोणीय आपको समस्या के बारे में बताने के लिए एक अपवाद फेंक देगा। ?स्ट्रिंग में एक प्रतीक जोड़ना यह कहता है कि यह नियंत्रक वैकल्पिक है और यदि नहीं मिला तो एक अपवाद नहीं फेंका जाना चाहिए। हालांकि यह असंभव लगता है, अगर हम <my-menu-item>एक <mymenu>कंटेनर के बिना इस्तेमाल होने देना चाहते थे, तो हम इसे अंतिम आवश्यकता स्ट्रिंग के लिए जोड़ सकते हैं ?^myMenu।

Answer 3

require:'ngModel'और require:'^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);                
        };
    }
  };
});