Angular inverse $watch

Question

Is it possible to use an inverse $watch in Angular?

My problem

I using angular-translate and I want to use a $http.put for every translation that is missing. But I get this error:

"10 $digets() iterations reached" when trying to $http.post() from ng-translate error handler

My solution

To solve this, I have created an array and I want to push all missing translations ID into it. When the page is ready, I want to put the array to my backend, where the the id's are be checked and saved into the database.

My question

But, how do I know when the page is ready, with other words, how do I know when angular is ready to push the missing translations into the array? I was thinking to an inverse $watch function, so, an function was called when there is nothing written in the array/collection for, let's say, 1 second. Is that possible, or are there better ways to solve this?

I have no code to show, since all codes are basic functions like $http and array.push

When you say "page is ready" do you mean after the page has got data from the server? If so have you tried using asynchronous functions to run the next function after the first returned? — Callum, Jan 23 '17 at 15:08
It sounds like you may want something like _.debounce or something like that. — Daniel, Jan 23 '17 at 15:11
It's about waiting until data has been retrieved, if you are using an $http action, you can simply use `.then()` promise callback to execute code as soon as response successfully received. `$http.get("api/someEndpoint").then(function(response) { this.someControllerArray = response.data });` — Alexander Staroselsky, Jan 23 '17 at 15:19

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

There are many solutions to check if controller is finished fetching and binding data to template, depending on if the translation id string are coming from an endpoint or initially exist in template, I would suggest these ways:

This answer shows use of diectives in template
This answer is checking for $viewContentLoaded
You can use $timeout without defining a specific time

edited May 23 '17 at 11:52

Community

1
1

answered Jan 23 '17 at 15:12

Reyraa

4,174
2
28
54

score 0 · Answer 2 · edited May 23 '17 at 11:45

If you are making an $http call of some type, you can use the promise callbacks such as then(), catch(), finally() to take appropriate actions with the response:

$http.put('api/someEndpoint').then(function(response) {
    // $scope.someArray.push(response.data);
    // this.someArray.push(response.data);
});

If your translations or items are in an ng-repeat you can based on this answer execute a function on completion of ng-repeat and emit events using $emit while listening to them using $on of $scope or $rootScope.

app.controller('SomeController', function SomeController($scope) {
    // executed on last iteration of ng-repeat
    $scope.foo = function() { $scope.$emit('someEvent') });

    $scope.$on('someEvent', function() { // event triggered, do something like $http });
});

It's not entirely clear how you are populating the items with this IDs, but that could be one approach.

Hopefully that helps!

score 0 · Answer 3 · answered Jan 23 '17 at 18:57

Here is a small demo I worked on getting some idea from the other stackoverflow question you have tagged. https://embed.plnkr.co/anL7unrSAB21hdLPMoxG/

I think you don't need to worry if the page ready, because here we hook our process to the useMissingTranslationHandler of the translate service. Below are a few code snaps from the attached demo plunck

angular
  .module('app', ['pascalprecht.translate', 'ngCookies'])
  .service('customTranslationHandlerService', ['$http', function ($http) {

    this._queue = {};

    /* queue items to push to server ....*/
    this.pushToQueue = function (missingTranslationId) {
      if (!this._get(missingTranslationId)) {
        this._set(missingTranslationId);
      }
      this._start();
    }
  }])
  .factory('customTranslateMissingTranslationHandlerLog', ['customTranslationHandlerService', function (customTranslationHandlerService) {

    return function (translationId) {
      customTranslationHandlerService.pushToQueue(translationId);
    };
  }])
  .config(['$translateProvider', function ($translateProvider) {

    $translateProvider.useMissingTranslationHandler('customTranslateMissingTranslationHandlerLog');
  }])

Angular inverse $watch

3 Answers3