এনজিএমডেলের মধ্যে পার্থক্য কী। মডেলওয়ালিউ এবং এনজি মডেল $ ভিউভ্যালু


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:মডেলটির মান, যা নিয়ন্ত্রণের সাথে আবদ্ধ।

আমি ধরে নিচ্ছি যে আপনার এনজি মডেল একটি <input />উপাদানটির উল্লেখ করছে ...? সুতরাং আপনার <input>একটি স্ট্রিং মান আছে যা এটি ব্যবহারকারীর কাছে প্রদর্শিত হয়, তাই না? তবে আসল মডেলটি সেই স্ট্রিংয়ের অন্য কোনও সংস্করণ হতে পারে। উদাহরণস্বরূপ, ইনপুটটিতে স্ট্রিংটি প্রদর্শিত হচ্ছে '200'তবে <input type="number">(উদাহরণস্বরূপ) আসলে 200একটি পূর্ণসংখ্যা হিসাবে একটি মডেল মান থাকবে । সুতরাং আপনি যে স্ট্রিংয়ের উপস্থাপনাটি "দর্শন" করছেন সেটি <input>হ'ল ngModel.$viewValueএবং সংখ্যার উপস্থাপনাটি হবেngModel.$modelValue

আর একটি উদাহরণ হ'ল <input type="date">যেখানে $viewValueএমন কিছু হবে Jan 01, 2000এবং এটি $modelValueএকটি আসল জাভাস্ক্রিপ্ট Dateঅবজেক্ট যা সেই তারিখের স্ট্রিংটি উপস্থাপন করে। যে জানার জন্য?

আমি আশাকরি এটাই আপনার প্রশ্নের উত্তর।


সুতরাং মূলত, $viewValueসবসময় একটি স্ট্রিং হয়?
সিডিএমকেই

7
হিসাবে ডক্স বলে, $viewValue: Actual string value in the view.। তাই হ্যাঁ.
টেনিসেন্ট

7
আরেকটি নোট। যখন একটি <input type="text">মান খালি, $modelValueসম্পত্তি undefined, যেহেতু $viewValueহয় ''খালি স্ট্রিং। আপনি যদি তার "দৈর্ঘ্য" স্নিগ্ধ করে থাকেন $modelValueযা কাজ করে না তবে এটি কার্যকর $viewValueহবে।
ব্র্যাডগ্রিনস 21

8
$viewValueসবসময় একটি স্ট্রিং নয়। এটি বর্তমান কৌনিক মূল নির্দেশের জন্য একটি স্ট্রিং, তবে এটি আপনার কাস্টম নিয়ন্ত্রণগুলিতে আদিম বা কোনও বিষয় হতে পারে। একটি ভাল উদাহরণ, <input file="type">উপাদান, যেখানে ভিউভ্যালুতে FileListব্যবহারকারী দ্বারা সংযুক্ত ফাইলগুলির সাথে অবজেক্ট থাকে । কৌনিক দস্তাবেজগুলি এখনই এটি সম্পর্কে বিভ্রান্ত করছে এবং আপডেট করা উচিত।
515

4
এছাড়াও যদি ইনপুটটি অবৈধ হয় তবে $ মডেলওয়ালু সেট করা হবে না। অর্থাৎ, যদি আপনার <ইনপুট এনজি-মিনিলেথ = "8" ...> থাকে এবং আপনার ইনপুটটি কেবল 5 টি অক্ষর দীর্ঘ হয় তবে $ ভিউভ্যালু সেই 5 টি অক্ষর দেখায় তবে $ মডেলওয়ালুর অস্তিত্ব থাকবে না।
Honkskillet

27

আপনি এই জাতীয় জিনিস দেখতে পারেন:

  • $modelValue এটি আপনার বাহ্যিক এপিআই, এটি বলতে আপনার নিয়ন্ত্রণকারীর কাছে উন্মুক্ত কিছু।
  • $viewValue আপনার অভ্যন্তরীণ এপিআই, আপনার এটি কেবল অভ্যন্তরীণভাবে ব্যবহার করা উচিত।

সম্পাদনা করার সময় $viewValue, রেন্ডার পদ্ধতিটি কল করা হবে না, কারণ এটি "রেন্ডার করা মডেল"। আপনাকে এটি ম্যানুয়ালি করতে হবে, অন্যদিকে রেন্ডারিং পদ্ধতিটি $modelValueসংশোধন করার পরে স্বয়ংক্রিয়ভাবে কল হবে ।

তবে তথ্যটি ধারাবাহিক থাকবে, ধন্যবাদ $formattersএবং $parsers:

  • যদি আপনি পরিবর্তন $viewValue, $parsersএটি ব্যাক অনুবাদ করবে $modelValue
  • যদি আপনি পরিবর্তন $modelValue, $formattersতা রূপান্তর করবে $viewValue

$ ভিউভ্যালু সম্পাদনা করার সময়, রেন্ডার পদ্ধতিটি কল করা হবে না I আপনি যদি $ ভিউভ্যালু পরিবর্তন করেন তবে ars পার্সাররা এটি আবার $ মডেলওয়ালিউ.মিনস $ মডেলভ্যালু পরিবর্তনতে অনুবাদ করবে and এবং রেন্ডারিং পদ্ধতিটি স্বয়ংক্রিয়ভাবে mod মডেলভ্যালিউ পরিবর্তনসমূহ upon নামে ডাকা হবে, সুতরাং পরোক্ষভাবে, যখন V ভিউভ্যালু পরিবর্তন হয়, রেন্ডার পদ্ধতি বলা হয়। তাই কি ?
মুকুন্দ কুমার

4
এটি কীভাবে কাজ করে তা বোঝার জন্য আপনাকে কৌণিক এনজিএম মডেল দ্বি-মুখী বাইন্ডিং পাইপলাইনটি খনন করতে হবে। পদ্ধতির $viewValueমাধ্যমে আপডেট করার সময় setViewValue(viewValue), পার্সার / ভ্যালিডেটররা কিক ইন (যদি থাকে) এবং viewValueমডেলভ্যালুতে এটি বিশ্লেষণ করে, এটি বৈধ করুন, এটিকে স্কোপে লিখুন এবং তারপরে লিক করুন viewChangeListeners। পরের বার ডাইজেস্ট রান করার সময়, মডেল মানটি সুযোগ থেকে পুনরুদ্ধার করা হয় এবং নিয়ামকের $ মডেলওয়ালুর সাথে তুলনা করা হয়: github.com/angular/angular.js/blob/master/src/ng/directive/… । যদি তারা সমান হয় (এবং তারা আপনার দৃশ্যে সমান হবে), তবে এটি ফিরে আসে।
ডেমিসেক্স

18

কৌণিকটি এনজিওমোডেল ডেটার দুটি দৃষ্টিভঙ্গির উপর নজর রাখতে হবে- এটি ডিওএম (ব্রাউজার) দ্বারা দেখা তথ্য হিসাবে রয়েছে এবং তারপরে সেই মানগুলির কৌণিক প্রক্রিয়াজাত উপস্থাপনা রয়েছে। $viewValueকরে DOM পাশ মান। সুতরাং, উদাহরণস্বরূপ, একটি ইন কি ব্যবহারকারী তাদের ব্রাউজারে টাইপ করা হয়। <input>$viewValue

একবার কেউ ধরনের কিছু <input>তারপর $viewValue$ পারজার দ্বারা প্রক্রিয়াকৃত এবং মান যা বলা হয় কৌণিক দৃষ্টিভঙ্গি পরিণত হয় $modelValue

সুতরাং আপনি $modelValueকৌনিকটির মানটির প্রসেসড সংস্করণ, মডেলটিতে যে মানটি দেখেন তা হ'ল ভাবতে পারেন , যখন $viewValueকাঁচা সংস্করণ।

আরও এক ধাপ এগিয়ে নিতে আমরা কল্পনা করি এমন কিছু করি যা পরিবর্তন করে $modelValue। কৌণিক এই পরিবর্তনটি দেখে এবং $viewValueডিওমে প্রেরণের জন্য একটি আপডেট (নতুন $ মডেলওয়ালুর উপর ভিত্তি করে) তৈরি করতে $ ফর্ম্যাটরগুলি কল করে।


আপনার মানে $ মডেলওয়ালু বা $ মডেলভিউ ?? যদি $ মডেলওয়ালু হয় তবে দয়া করে টাইপটি সংশোধন করুন।
প্ল্যাঙ্কটন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.