angularjs angularjs-directive angular-forms

Componente/directiva de formulario personalizado AngularJS usando ng-model



angularjs-directive angular-forms (1)

Implementación de controles de formulario personalizados (usando ngModel )

Utilice el controlador ngModel y la forma de objeto de la propiedad require en el 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() {} }; });

Uso:

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

Al crear instancias y usar el controlador ng-model , la directiva establecerá automáticamente los controles de formulario según sea necesario.

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

Recomiendo aislar el alcance con ngModel como entrada. La salida debe hacerse con el método $ setViewValue .

Para más información, ver

Componente / directiva de formulario personalizado angular y propiedad $ dirty

Cuando se usa una entrada regular, como

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

después de escribir en el cuadro de entrada myForm.$dirty es verdadero.

Me gustaría crear una directiva simple como

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

El uso de la muestra sería

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

y después de que el usuario hace clic en cualquiera de los dos botones, myForm$dirty se establece en verdadero.

¿Cómo se logra esto?