Question AngularJS - comment changer la valeur de ngModel dans la directive personnalisée?


Jetons un coup d'oeil à ma directive:

angular.module('main').directive('datepicker', [
function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attributes, ngModel) {
            ngModel.$modelValue = 'abc'; // this does not work
            // how do I change the value of the model?

Alors, comment puis-je changer la valeur du modèle ng?


37
2018-03-25 15:42


origine


Réponses:


Il y a différentes manières de le faire:

  1. $setViewValue() met à jour la vue et le modèle. La plupart des cas, cela suffit.
  2. Si vous souhaitez déconnecter la vue du modèle (par exemple, le modèle est un numéro mais la vue est une chaîne avec des séparateurs de milliers), vous pouvez accéder directement à $viewValue et $modelValue
  3. Si vous souhaitez également écraser le contenu de ng-model (par exemple, la directive modifie le nombre de décimales, actualise également le modèle), injecte ngModel: '=' sur la portée et l'ensemble scope.ngModel 

par exemple.

  return {
     restrict: 'A',
     require: 'ngModel',
     scope: {
         ngModel: '='
     },
     link: function (scope, element, attrs, ngModelCtrl) {

        function updateView(value) {
            ngModelCtrl.$viewValue = value;
            ngModelCtrl.$render(); 
        }

        function updateModel(value) {
            ngModelCtrl.$modelValue = value;
            scope.ngModel = value; // overwrites ngModel value
        }
 ...

LIENS:


41
2017-08-05 08:35



Pour travailler avec des expressions de liaison complexes, vous devez utiliser le $ parse le service et le assign méthode.

Pour plus d'informations, regardez cette vidéo de ng-conf - il s'agit de choses intéressantes à faire avec la directive ng-model: https://www.youtube.com/watch?v=jVzymluqmg4

app.directive('datepicker', ['$parse',
    function($parse) {
        return {
            require: '?ngModel',
            link: function(scope, element, attributes, controller) {
                // $parse works out how to get the value.
                // This returns a function that returns the result of your ng-model expression.
                var modelGetter = $parse(attributes['ngModel']);
                console.log(modelGetter(scope));

                // This returns a function that lets us set the value of the ng-model binding expression:
                var modelSetter = modelGetter.assign;

                // This is how you can use it to set the value 'bar' on the given scope.
                modelSetter(scope, 'bar');

                console.log(modelGetter(scope));
            }
        };
    }
]);

27
2018-03-26 10:52



Ce que vous avez essayé fonctionne réellement: voir ce Plunker

Vous ne le "voyez" pas dans l'entrée car changer le modèle de cette façon n'appelle pas controller.$render() mettre le nouveau controller.$viewValue.

Mais pourquoi ne pas simplement changer la $scope valeur (sauf si vous ne le savez pas, mais ce serait bizarre):

angular.module('main').directive('datepicker', [function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attributes, controller) {
          var model = attributes['ngModel'];
          scope[model] = 'bar';
        }
    };
}]);

Et dans votre HTML:

<input ng-model="yourVariable" datepicker>

MODIFIER: (solution dynamique)

angular.module('main').directive('datepicker', [function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attributes, controller) {
          // get the value of the `ng-model` attribute
          var model = attributes['ngModel'];

          // update the scope if model is defined
          if (model) {
            scope[model] = 'bar';
          }
        }
    };
}]);

4
2018-03-25 16:29



Cela fonctionne pour un DatePicker sur mon site

link: function(scope, elem, attrs, ngModel) {
         scope.$apply(function(){
             ngModel.$viewValue = value;
         }
} 

1
2018-05-29 18:55



Voici la meilleure explication que j'ai rencontrée. Cela m'a aidé énormément et rassemble les détails d'un certain nombre d'autres réponses ici.

CONSEIL: Faites attention à lire l'article dans son intégralité plutôt que de le parcourir, sinon vous risquez de manquer certains éléments clés!

https://www.nadeau.tv/using-ngmodelcontroller-with-custom-directives/


1
2018-06-14 22:07