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 सच पर सेट है।

यह कैसे पूरा किया जाता है?


कस्टम फ़ॉर्म नियंत्रण लागू करना ( ngModel का उपयोग ngModel )

DDO में 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>

एनजी-मॉडल नियंत्रक को तत्काल और उपयोग करके, निर्देश स्वचालित रूप से आवश्यक के रूप में नियंत्रण स्थापित करेगा।

DEMO

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