AngularJS getter / setter

Je suis en train d'apprendre angulaire et je suis à essayer de comprendre quelle est la meilleure solution pour utiliser les méthodes de lecture/définition.

Dire, je suis en utilisant une bibliothèque qui expose les getters et les setters (comme Moment.js n').

J'ai essayé plusieurs façons de traiter avec les getters et les setters, ils sont ici:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Example - example-ngModel-getter-setter-production</title>
  <script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js">    </script>
  <script src="app.js"></script>
</head>

<body ng-app="getterSetterExample">
  <div ng-controller="ExampleController">
    <form name="userForm">
      Name :
      <input type="text" name="userName" ng-model="user.name" ng-model-options="{ getterSetter: true }" />
      <br/>Name1:
      <input type="text" name="userName1" ng-model="user1.name" ng-model-options="{ getterSetter: true }" />
      <br/>Name2:
      <input type="text" name="userName2" ng-model="user2.name" ng-model-options="{ getterSetter: true }" />
      <br/>Name3:
      <input type="text" name="userName3" ng-model="user3.name" ng-model-options="{ getterSetter: true }" />
    </form>
    <pre>user.name =         <span ng-bind="user.name()"></span>
      </pre>
    <pre>user1.name =        <span ng-bind="user1.name()"></span>
      </pre>
    <pre>user2.name =        <span ng-bind="user2.name()"></span>
      </pre>
    <pre>user3.name =        <span ng-bind="user3.name()"></span>
      </pre>
  </div>
</body>

</html>

app.js

  angular.module('getterSetterExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
var _name = 'Brian';
var _name3 = 'Joe';
var name1 = {
_name: 'George',
name:function(newName) {
if (angular.isDefined(newName)) {
this._name = newName;
}
return this._name;
}
};
var name2 = {
_name: 'Michael',
name:function(newName) {
if (angular.isDefined(newName)) {
this._name = newName;
}
return this._name;
}
};
var name3 = {
name:function(newName) {
if (angular.isDefined(newName)) {
_name3 = newName;
}
return _name3;
}
};
$scope.user = {
name: function(newName) {
if (angular.isDefined(newName)) {
_name = newName;
}
return _name;
}
};
$scope.user1 = {
name: name1.name
};
$scope.user2 = {
name: function(newName) {
return name2.name(newName);
}
};
$scope.user3 = {
name: name3.name
};
}
]);

Vous pouvez essayer ici: http://plnkr.co/edit/S1qKre9umNpLOt0sjpZf?p=preview

2 Questions:

user1 essaie d'utiliser directement les getter/setter fournis par le nom1 objet, il ne fonctionne pas correctement, pouvez-vous expliquer pourquoi?

Est-il un moyen pour éviter de réécrire un "proxy" pour chaque getter/setter comme je l'ai fait dans user3? quelle serait la meilleure méthode à utiliser des getters/setters fourni par une bibliothèque externe?

Merci pour votre aide

OriginalL'auteur Chris Dunom | 2014-08-22

  1. 4

    user1 essaie d'utiliser directement les getter/setter fournis par le nom1 objet, il ne fonctionne pas correctement, pouvez-vous expliquer pourquoi?

    Le problème est avec le contexte, Vous êtes tout simplement la copie de la référence de fonction name1.name en faisant:-

        $scope.user1 = {
name: name1.name
};

    donc, lorsqu'il est exécuté this dans la lecture sera en fait le point de la window/global (non en mode strict). Vous pouvez contourner ce problème en utilisant Fonction.lier.

    Exemple:-

        $scope.user1 = {
name: name1.name.bind(name1)
};

    Démo

    Est-il un moyen pour éviter de réécrire un "proxy" pour chaque getter/setter comme je l'ai fait dans user3?

    Je voudrais juste créer un wrapper de sorte que je n'ai pas l'exécuter dans le contexte des questions comme celles-ci.

        $scope.user = getModel('name', 'Brian');
$scope.user1 = getModel('name', 'George');
$scope.user2 = getModel('name', 'Michael');
$scope.user3 = getModel('name', 'Joe');
$scope.address = getModel('address');
//You can improve this by passing an optional getter functionality as well for some specific evaluation on the value when set.
function getModel(propertyName, defValue) {
var obj =  {};
obj._defVal = defValue;
obj[propertyName] = function(newVal){
if (angular.isDefined(newVal)) {
obj[prop] = newVal;
}
return obj[prop];
}
return obj;
}
}

    Ou tout simplement 

     function getModel(propertyName, defValue) {
var obj =  {};
var propValue = defValue;
obj[propertyName] = function(newVal){
if (angular.isDefined(newVal)) {
propValue = newVal;
}
return propValue;
}
return obj;
}
}

    Demo2

    Je vous remercie pour votre utile et de réponse claire.
    J'ai un problème concernant le champ d'application.Vous avez indiqué que l'erreur a été le mauvais champ d'application en cours d'exécution.J'ai essayé de modifier le code pour inclure nom2 dans le champ d'application comme ceci: j'ai remplacé var nom2 par $champ d'application.nom2 et modifié index.html ng-model="nom2.nom". Je m'attendais à résoudre le problème de portée par avoir ce lié à l'étendue. Où est l'erreur?
    "Vous avez indiqué que l'erreur a été le mauvais champ d'application en cours d'exécution" Pas vraiment, je voulais dire mauvais contexte, souligné par des this. Je n'ai pas ce que tu veux dire. Pouvez-vous coller votre code dans un plunker..
    J'ai édité le code ici plnkr.co/modifier/3dh1DmGvIy6V7YPPEfKV?p=preview (8e version) -- regardez à la ligne 20 dans index.html et la ligne 18 dans app.js. J'ai attendu que cela soit lié à $champ d'application au moment de l'exécution.
    Pas vraiment.. Voir la ligne angulaires code if (ctrl.$options && ctrl.$options.getterSetter && isFunction(modelValue)) { modelValue = modelValue(); } Bascially la fonction de référence est modelValue et il est juste exécuté sans contexte. C'est juste de la copie de référence de fonction qui est exécutée. C'est toujours le problème quand on utilise this dans le morceau de code où nous n'avons pas un contrôle sur le contexte d'exécution.

    OriginalL'auteur PSL