la modification d'un contrôleur de portée de variable dans une directive n'est pas reflété dans la fonction de contrôleur

Dans mon directive, j'ai un contrôleur de variable, la page qui est incrémenté lorsque vous appuyez sur le bouton dans la directive. Cependant, à la ligne suivante, scope.alertPage() qui appelle la fonction de contrôleur de ne pas tenir compte de ce changement. Avis, lorsque vous cliquez sur le bouton page est toujours alerté 1!

Je sais que je peux résoudre ce problème en ajoutant $scope.$s'appliquent dans le contrôleur, mais ensuite, je reçois le message d'erreur qui dit un résumé est déjà en place.

Plunker

app = angular.module('app', []);

app.controller('myCtrl', function($scope) {

  $scope.page = 1;

  $scope.alertPage = function() {
    alert($scope.page);
  }

})

app.directive('incrementer', function() {
  return {
    scope: {
      page: '=',
      alertPage: '&'
    },
    template: '<button ng-click="incrementPage()">increment page</button>',

    link: function(scope, elem, attrs) {
      scope.incrementPage = function() {
          scope.page += 1;
          scope.alertPage();
      }
    }
  }
})

modèle html:

  <body ng-app='app' ng-controller='myCtrl'>
    page is {{page}}

    <incrementer page='page' alert-page='alertPage()'></incrementer>
  </body>

Le placer dans un $timeout ou lier 2 voies à un objet avec la propriété. Depuis qu'il est à 2 voies de liaison, l'original 2 tenu de la valeur sera mise à jour lors de la prochaine digérer cycle. j'.e essayer $timeout(scope.alertPage) ou d'une autre façon que vous pouvez essayer dans votre contrôleur de jeu $scope.page = {value : 1} et dans la directive ne $scope.page += 1; de repos et de ce que vous faites

OriginalL'auteur sq1020 | 2014-12-17

angularjs angularjs-directive

2

Vous pouvez passer la variable par référence, puis la mise à jour sera immédiate (parce que vous avez l'habitude de le copier, mais tout simplement passer à son emplacement en mémoire).

Vue:
```
<incrementer page="data" alert-page='alertPage()'></incrementer>
```
Directive:
```
link: function(scope, elem, attrs) {
  scope.incrementPage = function() {
      scope.page.page += 1;
      scope.alertPage();
  }
```
Ouais similaire à la méthode 2 dans mon exemple.. Penser.. Cheers.. 🙂

OriginalL'auteur Joe Samanek
1

Le problème est que le scénario est à l'arrêt.
1. bouton cliqué, incrementPage()
2. directive champ d'application valeur incrémentée (maintenant 2)
3. alertPage() parent champ d'application valeur de lire (encore 1)
4. portée parent mis à jour dans le cadre de digérer (maintenant 2)
Pour contourner ce problème, vous devez appeler la fonction d'alerte après le recueil de cycle (par exemple,$timeout) ou vous avez besoin de surveiller les modifications de la portée parent.
```
//in controller
$scope.$watch('page', function (currentValue, previousValue) {
  //initially triggered with same value
  if (currentValue > previousValue) {
    alert(currentValue)
  }
})
```
Puis modifiez la valeur naturellement.
```
//in directive html
<button ng-click="page = page + 1">
```
Vraiment créer une alerte pour cela? Le but de la fonction de liaison est complètement perdu ici, à mon humble avis. Je suis sûr que l'exemple collé à incrémenter un nombre est juste un simple exemple, le code d'origine doit être plus complexe que cela.
je pense que $watch est une solution élégante. À l'aide de $timeout déclenche un ensemble de nouvelles digest cycle autant que je sache.
Pas vraiment dans ce cas, il y aura un résumé de cycle pour ngclick délai ajoutera qu'il est propre à la asyc file d'attente qui sera exécuté avec la même empreinte cycle.. aussi vous ne devriez pas être la création de montres.. il est vraiment inutile dans ce cas et s'ajoutera jusqu'à la digérer cycle.

OriginalL'auteur AJcodez

Essayer de faire un peu différemment. Passer dans une fonction pour faire l'incrément plutôt que l'incrémentation à l'intérieur de la directive

HTML

        <incrementer page='incPage()' alert-page='alertPage()'></incrementer>

Contrôleur

          $scope.incPage = function() {    //Function to increment
             $scope.page++;
         };

Dans La Directive

         scope: {
           page: '&',      //Receive like this
           alertPage: '&'
         },


          link: function(scope, elem, attrs) {
               scope.incrementPage = function() {
                 scope.page();          //Call as function
                 scope.alertPage();
               }  
          }

OriginalL'auteur Scott

Vous devez vous connecter pour publier un commentaire.