Wenn regelmäßige Eingabe verwenden, wie

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

nach in dem Eingabefeld eingeben ist myForm.$dirty wahr.

würde Ich mag eine einfache Richtlinie zu schaffen, wie

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>' 
    }; 
});

Verwendungsbeispiel

auf eine der beiden Tasten

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

und nach Benutzer klickt wäre, myForm$dirty auf true gesetzt ist.

Wie wird das erreicht?

Quelle

2017-07-02 clearpath

Es wäre einfacher, wenn die Richtlinie pro Button zu wirken, wurde definiert, anstatt jede Taste in der Vorlage, Wäre das akzeptabel? – user2718281

Verwenden Sie [ngFormController API - $ setDirty] (https://docs.angularjs.org/api/ng/type/form.FormController#$setDirty) – georgeawg

Implementierung eigene Form Kontrollen (mit `ngModel`)

Verwenden der ngModel controller und die Objektform der require property im DDO:

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() {} 
    }; 
});

Usage:

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

von Instanziierung und Verwendung die ng-model controller wird die Direktive automatisch die Formularsteuerelemente wie erforderlich festlegen.

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

aktualisieren

Das sieht vielversprechend aus. Es sieht sogar aus wie scope: { ngModel: '<' }, wird nicht benötigt?

Für dieses Beispiel wird der ng-model Eingang nicht aber für komplexere Form Steuerungskomponenten verwendet, I empfehle Umfang mit ngModel als Eingang zu isolieren. Die Ausgabe sollte mit der $setViewValue method erfolgen.

Weitere Informationen finden Sie

Quelle

2017-07-03 05:02:48 georgeawg

Ich baue eine Direktive und hoffte, Code-Wiederholung zu vermeiden. – clearpath

Siehe Update auf die Antwort. – georgeawg

Das sieht vielversprechend aus. Es sieht sogar aus wie '' scope: {ngModel: '<'}, '' wird nicht benötigt? – clearpath

Angular benutzerdefiniertes Formular Komponente/directive und $ schmutzig Eigenschaft

Antwort

Implementierung eigene Form Kontrollen (mit ngModel)

The DEMO

aktualisieren

Verwandte Themen

Implementierung eigene Form Kontrollen (mit `ngModel`)