{"id":195,"date":"2014-12-11T15:46:00","date_gmt":"2014-12-11T14:46:00","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=195"},"modified":"2014-12-31T13:56:28","modified_gmt":"2014-12-31T12:56:28","slug":"definir-une-variable-dans-le-scope-depuis-un-evenement-systeme","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/definir-une-variable-dans-le-scope-depuis-un-evenement-systeme\/","title":{"rendered":"D\u00e9finir une variable dans le scope depuis un \u00e9v\u00e9nement syst\u00e8me"},"content":{"rendered":"

\"AngularJS-large\"<\/a><\/p>\n

Je veux que mon application renseigne une valeur dans le $scope AngularJs quand je re\u00e7ois un \u00e9v\u00e9nement syst\u00e8me<\/strong>…mais \u00e7a ne marche pas !<\/p>\n

Pourtant \u00e7a parait simple mais les \u00e9v\u00e9nements syst\u00e8mes sont trait\u00e9s en dehors d’AngularJs donc on ne peut pas faire un simple :<\/p>\n

\r\n$scope.maVariable = 'toto';\r\n<\/pre>\n
Alors c’est quoi l’astuce?<\/p>\n
<\/p>\n
Le probl\u00e8me :<\/h3>\n
Pour expliquer mon probl\u00e8me d’origine, j’ai voulu faire le bout de code suivant :<\/p>\n
\r\nangular.module('monApp').run(['$scope', function($scope) {\r\n    document.addEventListener('deviceready', function() {\r\n         $scope.maVariable = 'toto';\r\n    });\r\n});\r\n<\/pre>\n
Un code tout simple qui enregistre la valeur ‘toto’ dans le $scope quand l\u2019\u00e9v\u00e9nement ‘deviceready’ est re\u00e7u par l’application.
\nOn pourrait imaginer que \u00e9v\u00e9nement serait l\u2019\u00e9v\u00e9nement re\u00e7u sur le bouton “back” physique du t\u00e9l\u00e9phone aussi :<\/p>\n
\r\ndocument.addEventListener('backbutton', function(){});\r\n<\/pre>\n
A l\u2019ex\u00e9cution tout se passe bien mais si on essaie d’afficher “$scope.maVariable” dans la vue, rien ne s’affiche.<\/p>\n
L’explication :<\/h3>\n
Les \u00e9v\u00e9nements syst\u00e8mes sont g\u00e9r\u00e9s en dehors d’AngularJS, ce qui fait que l’on n’attribue pas notre valeur ‘toto’ au $scope Angular mais \u00e0 une simple variable locale.<\/p>\n
Pour appliquer notre valeur au $scope Angular il faut utiliser la m\u00e9thode “$apply”<\/strong>. Mais qu’est ce que c’est cette m\u00e9thode?<\/p>\n
$scope.$apply()<\/strong> prend une fonction ou une expression Angular comme param\u00e8tre et l\u2019ex\u00e9cute puis appelle $scope.$digest() qui va mettre \u00e0 jour le binding ou les “watchers”.<\/p>\n
Pour corriger notre code \u00e9crit plus haut il nous suffit donc d’\u00e9crire :<\/p>\n
\r\nangular.module('monApp').run(['$scope', function($scope) {\r\n    document.addEventListener('deviceready', function() {\r\n         $scope.$apply(function() {\r\n            $scope.maVariable = 'toto';\r\n        });\r\n    });\r\n});\r\n<\/pre>\n
Et ainsi notre variable est bien mise \u00e0 jour depuis l\u2019\u00e9v\u00e9nement syst\u00e8me !<\/p>\n","protected":false},"excerpt":{"rendered":"
Je veux que mon application renseigne une valeur dans le $scope AngularJs quand je re\u00e7ois un \u00e9v\u00e9nement syst\u00e8me…mais \u00e7a ne marche pas ! Pourtant \u00e7a parait simple mais les \u00e9v\u00e9nements syst\u00e8mes sont trait\u00e9s en dehors d’AngularJs donc on ne peut pas faire un simple : Alors c’est quoi l’astuce?<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,9],"tags":[23,19,39],"_links":{"self":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/195"}],"collection":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/comments?post=195"}],"version-history":[{"count":1,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/195\/revisions"}],"predecessor-version":[{"id":196,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/195\/revisions\/196"}],"wp:attachment":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/media?parent=195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/categories?post=195"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/tags?post=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}