web-dev-qa-db-fra.com

Rappel du service Angularjs pour mettre à jour l'étendue du contrôleur

Un service avec une fonction de rappel de bibliothèque tierce: 

mbAppModule.service('aService', function ($http) {
    this.data={"somedata":0};
    var m3rdPartLib="init";  // init    
    m3rdPartLib.on('timeupdate', function() {
        this.data.somedata=1;
    });
}

Et un contrôleur 

mbAppModule.controller({
    MController: function ($scope, $http, mService) {
        $scope.mService= mService;    
    });
});

page html

{{mService.data.somedata}}

PROBLÈME:

m3rdPartLib.on () est une fonction de rappel de bibliothèque tierce que je l'utilise dans un service. Je veux montrer dans l'interface utilisateur comme il est mis à jour. Lors du rappel, la valeur est modifiée mais ne se reflète pas sur l'interface utilisateur.

Lire des documents et trouver $ rootScope. $ Apply pourrait être appelé, mais je n'ai pas la référence $ scope/$ rootScope dans le service.

angularjsangularjs-scope
21
andNn

Vous pouvez prendre une dépendance sur $rootScope et appeler apply dans votre service.

mbAppModule.service('aService', ["$http", "$rootScope", function ($http, $rootScope) {
    this.data = {
        "somedata": 0
    };
    var m3rdPartLib = "init"; // init    
    m3rdPartLib.on('timeupdate', function () {
        $rootScope.$apply(function(){
            this.data.somedata = 1;
        });
    });
}]);
26
Mark Coleman

Je devais mettre à jour un champ de saisie d'un service car il avait des écouteurs et ce qui ne changeait pas les données de manière aléatoire et dynamique.

Cela pourrait également être utilisé pour appeler des fonctions d'étendue dans le contrôleur:

//scope will be set to current scope of a controller
//which has an ng-view containing this element    
var scope = angular.element('#input-element').scope();
//wrap changes in an apply call to make sure view and model are consistent
scope.$apply(function() {
    scope.object.data = value;
});

Grâce à cet article: Comment accéder à la variable $ scope dans la console du navigateur avec AngularJS?

3
mattdlockyer

Si vous utilisez scope dans votre service, cela indique clairement que vous cassez SRP car votre service ne devrait récupérer que des données sur votre contrôleur ... Je vous suggère de faire quelque chose comme cela.

mbAppModule.service('aService', ["$http", "$rootScope", function ($http, $rootScope) {
  this.data = {
    "somedata": 0
  };
  var m3rdPartLib = "init"; // init    
  this.GetPartLib = function () { 
    return m3rdPartLib;
  }
}]);

mbAppModule.controller({
  MController: function ($scope, $http, mService) {
  this.GetPartLib = function (){ 
    mService.on('timeupdate', function() {
     this.data.somedata=1;
    });
  }
});
0
Andre L.A.C Bittencourt

Utilisez la fonction $scope.$watch. Regarde mon jsfiddle . Je n'ai pas votre bibliothèque, alors je ne la simule que - la valeur passe de 0 à 1 après 5 secondes.

0
mchrobok