Les deux sens de la liaison de données dans les Directives AngularJS

J'ai essayé de définir des directives afin que je puisse afficher différentes "widgets" dans un formulaire, en fonction du type de terrain et de ses paramètres, qui sont stockés dans une base de données. J'ai besoin de réagir à différents types de scénarios, d'où la nécessité de directives pour la poignée de mise en page.

Tout en jouant avec quelques exemples, je suis venu avec un code *un peu* travaux:

HTML

<input type="text" ng-model="myModel" style="width: 90%"/>  
<div class="zippy" zippy-title="myModel"></div>

Directive

myApp.directive('zippy', function(){
    return {
      restrict: 'C',
      //This HTML will replace the zippy directive.
      transclude: true,
      scope: { title:'=zippyTitle' },
      template: '<input type="text" value="{{title}}"style="width: 90%"/>',
      //The linking function will add behavior to the template
      link: function(scope, element, attrs) {
            //Title element
            element.bind('blur keyup change', function() {
                scope.$apply(read);
            });

            var input = element.children();


            function read() {
                scope.title = input.val();
            }
        }
    }
});

Cela semble œuvres (quoique beaucoup plus lent qu'un *bon* angularJS variable de liaison) mais je suppose que il doit y avoir une meilleure façon de le faire. Quelqu'un peut jeter quelque lumière sur la question?

Juste curieux, je sais que vous n'avez pas besoin d'appeler $s'appliquent manuellement, mais pourquoi étiez-vous contraignant à la fois blur et change? N'est-ce pas un pléonasme? Si non, je serais curieux de savoir ce que la différence est juste à l'aide de keyup blur.
blur et change sont différents, mais je crois que pour des raisons pratiques, keyup et change sont fonctionnellement similaires. La seule diference serait que si j'ai changé l'entrée de la valeur de la programmation, à l'aide de change serait le déclenchement d'un événement (l'entrée de données de la changer), alors qu'en laissant change allait faire un tel changement invisible, sauf si elle provient d'une combinaison de touches. Gardez à l'esprit que c'était "âges" auparavant, je n'avais aucune idée de ce que je faisais avec le génial bête qui est angularJS 😉

InformationsquelleAutor Tiago Roldão | 2012-11-08

27

Je ne sais pas pourquoi vous êtes le déclenchement de la $apply méthode manuellement car vous n'en avez pas besoin.

J'ai édité l'exemple que vous avez utilisé à partir de l'angle de la page et inclus l'entrée.
Il fonctionne pour moi: http://jsfiddle.net/6HcGS/2/

HTML
```
<div ng-app="zippyModule">
  <div ng-controller="Ctrl3">
    Title: <input ng-model="title">
    <hr>
    <div class="zippy" zippy-title="title"></div>
  </div>
</div>
```
JS
```
function Ctrl3($scope) {
  $scope.title = 'Lorem Ipsum';
}

angular.module('zippyModule', [])
  .directive('zippy', function(){
    return {
      restrict: 'C',
      replace: true,
      transclude: true,
      scope: { title:'=zippyTitle' },
      template: '<input type="text" value="{{title}}"style="width: 90%"/>',
      link: function(scope, element, attrs) {
        //Your controller
      }
    }
  });
```
Mise à JOUR
maxisam est droit, vous devez utiliser ng-model au lieu de la liaison de la variable par rapport à la valeur de la sorte:
```
<input type="text" ng-model="title" style="width: 90%"/>
```
Ici est la version de travail: http://jsfiddle.net/6HcGS/3/
- Il ne le fait pas, il fonctionne d'une seule façon (comme c'est dans l'angle de docs' exemples). Ce que je suis en tentant de deux manière de liaison de données de scénarios de changer le $la valeur de la portée et de la directive de la valeur des mises à jour, de modifier la directive de la valeur et de la valeur de la portée des mises à jour. La CHANCE de NOTE Brian Ford à partir de la angularJS équipe un peu les réponses de ce, ici: youtube.com/watch?feature=player_embedded&v=8_7K6bud5kw
- maxisam est bon, je viens de mettre à jour mon post et le jsfiddle
- Super! Le mot-clé "titre" est source de confusion si.. Pourriez-vous mettre à jour votre violon renommer "titre" à quelque chose comme "innerTitle", de sorte que la liaison entre un intérieur et un extérieur variable (dans une directive) est-elle claire?
InformationsquelleAutor F Lekschas
11

Vous voulez dire quelque chose comme cette ?

J'utilise essentiellement @Flek l'exemple.

La seule différence étant ng-model='title'

Le truc pour faire la liaison bidirectionnelle est ng-model, et il est dit dans la document:

ngModel est la directive qui indique Angulaire de faire les deux sens de la liaison de données.
Elle travaille de concert avec input, select, textarea. Vous pouvez facilement écrire
vos propres directives pour l'utilisation ngModel ainsi.
```
<input type="text" ng-model="title" style="width: 90%"/>
```
- Vous avez raison, merci! 🙂 J'ai mis à jour mon post et inclus le corrigé jsfiddle!
- Vous êtes les bienvenus 🙂
InformationsquelleAutor maxisam

Voici un moyen de passer pour un rappel de paramètre dans une directive. Le modèle du contrôleur:

    <component-paging-select-directive
            page-item-limit="{{pageItemLimit}}"
            page-change-handler="pageChangeHandler(paramPulledOutOffThinAir)"
            ></component-paging-select-directive>

La directive:

angular.module('component')
    .directive('componentPagingSelectDirective', [
        function( ) {
            return {
                restrict: 'E',
                scope: { 
                    //using the '=' for two way doesn't work
                    pageItemLimit:  '@', //the '@' is one way from controller
                    pageChangeHandler: '&'
                },
                controller: function($scope) {   
                    //pass value from this scope to controller method. 
                    //controller method will update the var in controller scope
                    $scope.pageChangeHandler({
                        paramPulledOutOffThinAir: $scope.pageItemLimit
                    })

                }, ...

Dans le contrôleur:

angular.module('...').controller(...
        $scope.pageItemLimit = 0; //initial value for controller scoped var

        //complete the data update by setting the var in controller scope 
        //to the one from the directive
        $scope.pageChangeHandler = function(paramPulledOutOffThinAir) {
            $scope.pageItemLimit = paramPulledOutOffThinAir;
        }

Notez la différence dans les paramètres de la fonction de la directive (un objet avec le paramètre que les clés), modèle ('déballé" clés " à partir du paramètre de l'objet dans la directive), de contrôleur et de définition.

InformationsquelleAutor Henry

Vous devez vous connecter pour publier un commentaire.