AngularJS custom form component / directive using ng-model
componente / directiva do formulário personalizado Angular e propriedade suja
Quando se utiliza uma entrada regular, como
<form name="myForm">
<input type="text" ng-model="foobar">
</form>
Depois de escrever na caixa de entrada myForm.$dirty
é verdade.
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>'
};
});
a utilização da amostra seria
<form name="myForm">
<my-directive foo-bar="myObj.foobarValue"></my-directive>
</form>
e depois de o Utilizador carregar em qualquer um dos dois botões, myForm$dirty
está definido como verdadeiro.
2
1 answers
Implementação de controlos sob forma personalizada (utilizando ngModel
)
Usar o controlador de ngModel e a forma objecto do require
propriedade no 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() {}
};
});
Utilização:
<form name="myForm">
<input type="text" ng-model="foobar">
<my-directive ng-model="foobar"></my-directive>
</form>
Ao instanciar e utilizar o controlador do modelo ng , a Directiva definirá automaticamente os controlos do formulário conforme necessário.
A demonstração
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
como entrada. O resultado deverá ser feito com o método $setViewValue .
Para mais informações, ver
3
Author: georgeawg, 2018-07-09 15:27:05