NgModel। $ ModelValue और ngModel के बीच अंतर क्या है


94

मेरे पास निम्नलिखित ckEditor निर्देश हैं। नीचे दो बदलाव हैं जो मैंने उदाहरण से देखे हैं कि संपादक में डेटा कैसे सेट करें:

app.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {

            var ck = null;
            var config = attr.editorSize;
            if (config == 'wide') {
                ck = CKEDITOR.replace(elm[0], { customConfig: 'config-wide.js' });
            } else {
                ck = CKEDITOR.replace(elm[0], { customConfig: 'config-narrow.js' });
            }


            function updateModel() {
                $scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            }

            $scope.$on('modalObjectSet', function (e, modalData) {
                // force a call to render
                ngModel.$render();
            });

            ck.on('change', updateModel);
            ck.on('mode', updateModel);
            ck.on('key', updateModel);
            ck.on('dataReady', updateModel);

            ck.on('instanceReady', function () {
                ngModel.$render();
            });

            ck.on('insertElement', function () {
                setTimeout(function () {
                    $scope.$apply(function () {
                        ngModel.$setViewValue(ck.getData());
                    });
                }, 1000);
            });

            ngModel.$render = function (value) {
                ck.setData(ngModel.$modelValue);
            };

            ngModel.$render = function (value) {
                ck.setData(ngModel.$viewValue);
            };
        }
    };
}])

क्या कोई मुझे बता सकता है कि क्या अंतर है:

ck.setData(ngModel.$modelValue);
ck.setData(ngModel.$viewValue);

और जो मुझे उपयोग करना चाहिए। मैंने कोणीय दस्तावेज को देखा और यह कहता है:

$viewValue

Actual string value in the view.

$modelValue

The value in the model, that the control is bound to.

मुझे पता नहीं है कि जब लेखक ने दस्तावेज़ में यह लिखा था तो उसका क्या मतलब था :-(

जवाबों:


151

आप सही दस्तावेज देख रहे हैं, लेकिन यह सिर्फ यह हो सकता है कि आप थोड़ा भ्रमित हों। $modelValueऔर $viewValueएक स्पष्ट अंतर है। यह यह है:

जैसा कि आपने पहले ही ऊपर उल्लेख किया है:

$viewValue:दृश्य में वास्तविक स्ट्रिंग (या ऑब्जेक्ट) मान।
$modelValue:मॉडल में मूल्य, कि नियंत्रण के लिए बाध्य है।

मुझे लगता है कि अपने ngModel एक <input />तत्व का जिक्र कर रहा हूँ ...? तो आपके <input>पास एक स्ट्रिंग मान है जो इसे उपयोगकर्ता को दिखाता है, है ना? लेकिन वास्तविक मॉडल उस स्ट्रिंग के कुछ अन्य संस्करण हो सकते हैं। उदाहरण के लिए, इनपुट स्ट्रिंग दिखा सकता है '200'लेकिन <input type="number">(उदाहरण के लिए) वास्तव में 200पूर्णांक के रूप में एक मॉडल मान होगा । तो जो स्ट्रिंग प्रतिनिधित्व आप "दृश्य" में <input>है ngModel.$viewValueऔर संख्यात्मक प्रतिनिधित्व होगा ngModel.$modelValue

एक और उदाहरण एक ऐसा स्थान होगा <input type="date">जहां $viewValueकुछ ऐसा होगा Jan 01, 2000और $modelValueएक वास्तविक जावास्क्रिप्ट Dateऑब्जेक्ट होगा जो उस तारीख स्ट्रिंग का प्रतिनिधित्व करता है। क्या इसका कोई मतलब है?

मुझे उम्मीद है इससे आपको अपने प्रश्न का उत्तर मिल गया।


तो मूल रूप से, $viewValueहमेशा एक स्ट्रिंग है?
cdmckay

7
जैसा कि डॉक्स कहते हैं $viewValue: Actual string value in the view.:। तो हाँ।
टेनिस

7
एक और नोट। जब एक <input type="text">मान रिक्त है, $modelValueसंपत्ति है undefined, जबकि $viewValueहै ''रिक्त स्ट्रिंग। यह एक फर्क कर सकता है यदि आप "लंबाई" सूँघ रहे हैं $modelValueजिसमें से काम नहीं करेगा, लेकिन $viewValueहोगा।
ब्रैडग्रेन

8
$viewValueहमेशा एक स्ट्रिंग नहीं है। यह वर्तमान कोणीय कोर निर्देशों के लिए एक स्ट्रिंग है, लेकिन यह आपके कस्टम नियंत्रण में एक आदिम या एक वस्तु हो सकती है। एक अच्छा उदाहरण, <input file="type">घटक है, जहां viewValue में FileListउपयोगकर्ता द्वारा संलग्न फाइलों के साथ ऑब्जेक्ट होता है । कोणीय डॉक्स अभी इस बारे में भ्रमित हैं और इसे अद्यतन किया जाना चाहिए।
17

4
यह भी कि यदि इनपुट अमान्य है $ modelValue सेट नहीं किया जाएगा। यानी, यदि आपके पास <input ng-minlength = "8" ...> और आप इनपुट केवल 5 वर्णों के हैं, तो $ viewValue उन 5 वर्णों को दिखाएगा, लेकिन $ modelValue मौजूद नहीं होगा।
ऑनस्किल्लेट

27

आप इस तरह की चीजें देख सकते हैं:

  • $modelValue आपका बाहरी API है, जो आपके नियंत्रक के संपर्क में है।
  • $viewValue आपका आंतरिक API है, आपको इसे केवल आंतरिक रूप से उपयोग करना चाहिए।

संपादन करते समय $viewValue, रेंडर विधि को नहीं बुलाया जाएगा, क्योंकि यह "रेंडर मॉडल" है। आपको इसे मैन्युअल रूप से करना होगा, जबकि $modelValueसंशोधनों पर स्वचालित रूप से रेंडरिंग विधि कहा जाएगा ।

हालाँकि, जानकारी संगत रहेगी, धन्यवाद $formattersऔर $parsers:

  • यदि आप बदलते हैं $viewValue, $parsersतो इसे वापस अनुवाद करेंगे $modelValue
  • यदि आप बदलते हैं $modelValue, $formattersतो इसे रूपांतरित कर देगा $viewValue

$ ViewValue का संपादन करते समय, रेंडर मेथड को नहीं कहा जाएगा। यदि आप $ viewValue को बदलते हैं, तो $ पार्सर्स इसे $ मॉडल में वापस ट्रांसलेट करेंगे। जब $ viewValue बदलता है, तो रेंडर मेथड कहा जाता है। क्या यह ?
मुकुंद कुमार

1
यह कैसे काम करता है यह समझने के लिए आपको कोणीय ngModel टू-वे बाइंडिंग पाइपलाइन में खुदाई करने की आवश्यकता है। विधि के $viewValueमाध्यम से अद्यतन करते समय setViewValue(viewValue), पार्सर / सत्यापनकर्ता (यदि कोई हो) किक करते हैं और viewValueमॉडलवैल्यू को पार्स करते हैं , तो इसे मान्य करें, इसे दायरे में लिखें और फिर किक करें viewChangeListeners। अगली बार डाइजेस्ट चलता है, मॉडल मान को स्कोप से पुनर्प्राप्त किया जाता है और नियंत्रक में $ मॉडलवैल्यू की तुलना में किया जाता है: github.com/angular/angular.js/blob/master/src/ng/directive/… । यदि वे समान हैं (और वे आपके परिदृश्य में समान होंगे), तो यह वापस आ जाता है।
डेमक्स

18

Angular को ngModel डेटा के दो दृष्टिकोणों पर नज़र रखना है- DOM (ब्राउज़र) द्वारा देखे गए डेटा के समान है और फिर उन मूल्यों के Angular द्वारा संसाधित प्रतिनिधित्व है। $viewValueडोम पक्ष मूल्य है। इसलिए, उदाहरण के लिए, ए <input>में$viewValue है जो उपयोगकर्ता ने अपने ब्राउज़र में टाइप किया है।

एक बार जब कोई व्यक्ति किसी चीज को टाइप करता है, <input>तो $viewValueउसे $ पार्सर्स द्वारा संसाधित किया जाता है और इसे वैल्यू के दृश्य में बदल दिया जाता है $modelValue

तो आप $modelValueकोणीय के प्रसंस्कृत संस्करण होने के बारे में सोच सकते हैं , जो मूल्य आप मॉडल में देखते हैं, जबकि $viewValueकच्चा संस्करण है।

इस एक कदम को और आगे ले जाने के लिए हम कुछ ऐसा करते हैं जिससे बदलाव आए $modelValue। Angular इस परिवर्तन को देखता है और $viewValueDOM को भेजे जाने के लिए एक अद्यतन (नए $ मॉडल के आधार पर) बनाने के लिए $ फॉर्मेटर्स को कॉल करता है।


यू मतलब $ मॉडलवैल्यू या $ मॉडलव्यू ?? यदि $ मॉडलवैल्यू, तो कृपया टाइपो को सही करें।
प्लैंकटन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.