Liaison bidirectionnelle à l'intérieur de la directive AngularJS fonctionne avec ng-click, mais ne fonctionne pas avec window.onclick

Quelqu'un peut-il expliquer, pourquoi quand je clique sur mon élément vm.random mis à jour l'élément intérieur, mais quand je clique juste sur la fenêtre vm.random pas mises à jour sur la couche de vue (mais console.log impression nouvelle valeur), bien que les deux événements tirent même fonction vm.update()Liaison bidirectionnelle à l'intérieur de la directive AngularJS fonctionne avec ng-click, mais ne fonctionne pas avec window.onclick

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.5.9" src="https://code.angularjs.org/1.5.8/angular.js"></script> 
 
    <script> 
 
    var app = angular.module('test', []) 
 
     .directive('testDir', function() { 
 
     return { 
 
      controllerAs: 'vm', 
 
      bindToController: true, 
 
      controller: function() { 
 
      var vm = this; 
 
      vm.random = Math.random(); 
 

 
      window.onclick = function() { 
 
       vm.update(); 
 
      }; 
 

 
      vm.update = function() { 
 
       vm.random = Math.random(); 
 
       console.log(vm.random); 
 
      }; 
 
      }, 
 
      template: '<div ng-click="vm.update()">Random number after click {{vm.random}}<input ng-model="vm.random"/></div>' 
 
     } 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body ng-app="test"> 
 
    <h1>My directive</h1> 
 
    <test-dir></test-dir> 
 
</body> 
 

 
</html>

Que dois-je changer dans ce bout pour pouvoir mettre à jour vm.random après window.onlick changer vm.random?

Source

2016-08-18 vologa

Essayez ceci:

window.onclick = funciton(){ 
    $scope.$apply(function(){ 
     vm.update(); 
    }); 
}

Rappelez-vous d'injecter la portée de $ dans votre contrôleur

Même si vm.random ne soit pas directement sur votre $scope, angulaire doit encore savoir, qu'il a changé. appeler $scope.$apply manuellement prend soin de cela.

La raison pour laquelle il travaille avec ng-click est, que les directives angulaires se charge automatiquement de $scope.$apply ing

Source

2016-08-18 10:36:59

pour la portée de $. Appliquent $ '+ 1' https://plnkr.co/edit/fy0yPf4DyyOjGbchA4Eg?p=preview –

Merci d'en faire un exemple @RJ –

Travailler aussi de cette façon: 'window.onclick = funciton() { vm.update(); $ scope. $ apply(); } ' – vologa

Liaison bidirectionnelle à l'intérieur de la directive AngularJS fonctionne avec ng-click, mais ne fonctionne pas avec window.onclick

Répondre

Questions connexes