angularjs - এনজিও-মডেল ব্যবহার করে কৌণিক জেএস কাস্টম ফর্ম উপাদান/নির্দেশিকা



angularjs-directive angular-forms (1)

কৌণিক কাস্টম ফর্ম উপাদান / নির্দেশ এবং $ নোংরা সম্পত্তি

নিয়মিত ইনপুট ব্যবহার করার সময় যেমন

<form name="myForm">
  <input type="text" ng-model="foobar">
</form>

myForm.$dirty ইনপুট বাক্সে টাইপ করার পরে myForm.$dirty সত্য।

আমি একটি সাধারণ দিকনির্দেশক যেমন তৈরি করতে চাই

angular.module('myModule', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      fooBar: '='
    },
    template: '<div><button ng-click="fooBar=foo"></button><button ng-click="fooBar=bar"></button></div>'
  };
});

নমুনা ব্যবহার হবে

<form name="myForm">
  <my-directive foo-bar="myObj.foobarValue"></my-directive>
</form>

এবং দুটি বোতামের যে কোনও myForm$dirty ক্লিক করার পরে, myForm$dirty সত্যতে সেট করা আছে।

এটি কীভাবে সম্পন্ন হয়?


কাস্টম ফর্ম নিয়ন্ত্রণগুলি প্রয়োগ করা হচ্ছে ( ngModel ব্যবহার করে)

ডিডিওতে require সম্পত্তি এনজিএমডেল কন্ট্রোলার এবং অবজেক্ট ফর্মটি ব্যবহার করুন:

angular.module('myModule', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    require: { ngModelCtrl: 'ngModel' },
    scope: {
      ngModel: '<'
    },
    bindToController: true,
    controllerAs: '$ctrl',
    template: 
       `<div>
          <button ng-click="$ctrl.ngModelCtrl.$setViewValue('foo')">
              Set foo
          </button>
          <button ng-click="$ctrl.ngModelCtrl.$setViewValue('bar')">
              Set bar
          </button>
       </div>`,
    controller: function ctrl() {}
  };
});

ব্যবহার:

<form name="myForm">
    <input type="text" ng-model="foobar">
    <my-directive ng-model="foobar"></my-directive>
</form>

এনজি-মডেল নিয়ামকটি তাত্ক্ষণিকভাবে এবং ব্যবহার করে, নির্দেশটি স্বয়ংক্রিয়ভাবে ফর্ম নিয়ন্ত্রণগুলি প্রয়োজনীয় হিসাবে সেট করবে।

ডেমো

angular.module('myModule', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    require: { ngModelCtrl: 'ngModel' },
    scope: {
      ngModel: '<'
    },
    bindToController: true,
    controllerAs: '$ctrl',
    template: 
       `<div>
          <button ng-click="$ctrl.ngModelCtrl.$setViewValue('foo')">
              Set foo
          </button>
          <button ng-click="$ctrl.ngModelCtrl.$setViewValue('bar')">
              Set bar
          </button>
       </div>`,
    controller: function ctrl() {}
  };
});
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="myModule">
    <h2>ngModel DEMO</h2>
    <form name="myForm">
        <input type="text" ng-model="foobar">
        <my-directive ng-model="foobar"></my-directive>
    </form>
    <br>myForm.$dirty = {{myForm.$dirty}}
    <br>myForm.$pristine = {{myForm.$pristine}}
    <br><button ng-click="myForm.$setDirty()">Set dirty</button>
    <br><button ng-click="myForm.$setPristine()">Set pristine</button>
  </body>

আমি ইনপুট হিসাবে ngModel দিয়ে স্কোপ বিচ্ছিন্ন করার প্রস্তাব দিই। আউটপুটটি $ setViewValue পদ্ধতি দিয়ে করা উচিত।

আরও তথ্যের জন্য, দেখুন





angular-forms