প্রয়োজনীয়তার অর্থ কী: 'এনজি মডেল'?

Question

এটি আমার নির্দেশের জন্য এইচটিএমএল:

<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'

— চাঁদমেনি

পরিবর্তে আমি কি ডেটা-এনজি-মডেল রাখতে পারি? এছাড়াও আমি কেন মাঝে মাঝে দেখতে পাই: "আবশ্যক: '? এনজি মডেল'," এটি বিভ্রান্তিকর।

Answer 1

requireনির্দেশ আপনি ডিরেক্টিভের আপনি আপনার চতুর্থ আর্গুমেন্ট হিসাবে নামের জন্য নিয়ামক দেয় linkফাংশন। (আপনি ^প্যারেন্ট উপাদানগুলিতে নিয়ামকের সন্ধান করতে ব্যবহার করতে পারেন; ?এটি alচ্ছিক করে তোলেন)) সুতরাং 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();                
      };
    }
  }
});

এই নির্দেশিকাটি ngModelরঙিনকার থেকে রঙটির মান পেতে এবং সেট করতে নিয়ামক ব্যবহার করে । এই জেএসফিডাল উদাহরণটি দেখুন: http://jsfiddle.net/BinaryMuse/AnMhx/

আপনি ব্যবহার করেন, তাহলে require: 'ngModel', আপনি সম্ভবত করা উচিত নয় এছাড়াও ব্যবহার করা ngModel: '='আপনার বিছিন্ন সুযোগ; ngModelControllerআপনি সব অ্যাক্সেস মান পরিবর্তন করতে হবে দেয়।

অ্যাঙ্গুলারজেএস হোমপেজে নীচের উদাহরণটিও এই কার্যকারিতাটি ব্যবহার করে (একটি কাস্টম নিয়ামক ব্যবহার করে না, না 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বিন্যাস

( ব্র্যাড গ্রিন অ্যান্ড শ্যাম শেশাদ্রীর অ্যাঙ্গুলারজেএস বইটি থেকে বের করুন )

অন্যান্য নির্দেশাবলীর কাছে প্রয়োজনীয় সম্পত্তি সিনট্যাক্স সহ এই নিয়ামকটি তাদের কাছে যেতে পারে । প্রয়োজনীয়তার সম্পূর্ণ ফর্ম দেখতে দেখতে:

require: '^?directiveName'

বিকল্পসমূহ:

1. directiveName

   এই উট-কেসড নামটি নিয়ন্ত্রকের কোন নির্দেশিকা থেকে আসা উচিত তা নির্দিষ্ট করে। সুতরাং যদি আমাদের <my-menuitem>নির্দেশকে তার পিতামাতার উপরে একটি নিয়ামক সন্ধান করতে হয় তবে <my-menu>আমরা এটিকে আমার মেনু হিসাবে লিখব।

2. ^

   ডিফল্টরূপে, কৌণিক একই উপাদানের নামের নির্দেশিকা থেকে নিয়ামক পায় gets এই al ^চ্ছিক প্রতীকটি যুক্ত করার সাথে সাথে নির্দেশটি সন্ধান করার জন্য ডিওএম ট্রিটি অনুসরণ করতে বলা হয়েছে। উদাহরণস্বরূপ, আমাদের এই প্রতীকটি যুক্ত করতে হবে; চূড়ান্ত স্ট্রিং হবে ^myMenu।

3. ?

   যদি প্রয়োজনীয় নিয়ামকটি পাওয়া যায় না, তবে কৌণিক সমস্যা সম্পর্কে আপনাকে বলার জন্য একটি ব্যতিক্রম ছুঁড়ে ফেলবে। ?স্ট্রিংয়ের সাথে একটি চিহ্ন যোগ করা বলছে যে এই নিয়ামকটি isচ্ছিক এবং খুঁজে পাওয়া না গেলে একটি ব্যতিক্রম ছোঁড়া উচিত নয়। যদিও এটি অসম্ভব বলে মনে হচ্ছে, আমরা যদি <my-menu-item>কোনও <mymenu>ধারক ছাড়া এটি ব্যবহার করতে দিতে চাই, আমরা এটির একটি চূড়ান্ত স্ট্রিংয়ের স্ট্রিংয়ের জন্য যুক্ত করতে পারি ?^myMenu।

Answer 3

require:'ngModel'এবং require:'^ngModel'আপনার মডেলকে উপাদান বা তার পিতা বা মাতা উপাদান যার উপর নির্দেশ আবদ্ধ হয় সংযুক্ত উদ্বুদ্ধ করার অনুমতি দেয়।

এটি মূলত স্কোপ বিকল্পটি ব্যবহার করে পাস করার পরিবর্তে লিঙ্ক / সংকলন ফাংশনে এনজিএমডেলটি পাস করার একটি সহজতম উপায়। একবার আপনার এনজিএমডেলে অ্যাক্সেস হয়ে গেলে আপনি এর মানটি ব্যবহার করে $setViewValueএটি পরিবর্তন করে , নোংরা / পরিষ্কার ব্যবহার করে $formatters, নজরদারি প্রয়োগ করতে পারেন ইত্যাদি can

নীচে এনজিএমডেল পাস এবং 5 সেকেন্ড পরে এর মান পরিবর্তন করার জন্য একটি সাধারণ উদাহরণ দেওয়া আছে example

ডেমো: 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);                
        };
    }
  };
});