Refresh $ scope of angular in a jQuery function

Question

Refresh $ scope of angular in a jQuery function

Navigation

#1 by (3 votes)

2

I have an angular controller and I need a jQuery function inside this one that is responsible for knowing if the user was inactive for x seconds.

Here I show you the code that I have:

var modulo = angular.module('appModule',[])
  .controller('nameCtrl', function ($scope){
    $scope.userlogued = true;
    $.idle(60, function () {
      $scope.userlogued = false;
      alert('Llevas 1 Minuto inactivo');
    });
  });

But I do not update the object $scope , that is, it does not update it as false if the 60 seconds were fulfilled.

Any suggestions?

jquery angularjs

asked by Jhonatan Rodriguez 28.09.2016 в 01:56

source

1 answer

Color a Google Calendar event Why do I create the properties in the wrong scope between parent and child controllers?

score 3 · Answer 1

Usually you should not use non-angular functions and events unless absolutely necessary. The reason for this is because then you must constantly use $scope.$apply for the view to update and this can generate an error at the same time

$ apply already in progress

angular.module('app', [])
  .controller('DigestCtrl', function($scope) {
    $scope.$apply();
    $scope.$apply();
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="app" ng-controller="DigestCtrl">
</div>

You can find on the internet a trick like the following

// NO LO USES 
if (!$scope.$$phase) $scope.$apply();

I do not recommend it and in fact this recommendation comes from the angular team itself, read

When to use $ scope. $ apply ( )

Antipatrons

It can be summarized in this

Do not do if (!$scope.$$phase) $scope.$apply() , this only means that your $scope.$apply() is not high enough in the execution stack

and

$scope.$apply() should occur as close to the binding of the asynchronous event as possible.

I show you your code as it would be with $scope.$apply

var modulo = angular.module('appModule', [])
  .controller('nameCtrl', function($scope) {
    $scope.userlogued = true;
    $.idle(20, function() {
      $scope.$apply(function() {
        $scope.userlogued = false;
      });
      alert('Llevas 20 segundos inactivo');
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appModule" ng-controller="nameCtrl">
  Espere 20 segundos sin actividad 
  <br>
  Usuario logueado: {{userlogued}}
</div>

And the recommended option, use an angle module that does the same as you want.

Example ng-idle

angular.module('app', ['ngIdle'])
  .controller('IdleCtrl', function($scope, Idle) {
    $scope.userLogged = true;

    Idle.watch();

    $scope.$on('IdleEnd', function() {
      $scope.userLogged = false;
    });
  })
  .config(function(IdleProvider) {
    IdleProvider.idle(20); // in seconds
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/HackedByChinese/ng-idle/develop/angular-idle.min.js"></script>
<div ng-app="app" ng-controller="IdleCtrl">
  Espere 20 segundos sin actividad 
  <br>
  Usuario logueado {{userLogged}}
</div>