Angular oppositional $watch

Question

Angular oppositional $watch

Can an inverse use of $watch in Angular be implemented?

The Issue

I am using angular-translate and I aim to execute a $http.put for every missing translation. However, I encounter the following error:

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

Possible Solution

To address this, I have initialized an array to hold all IDs of missing translations. Once the page is loaded, my plan is to send this array to the backend, where the IDs will be validated and stored in the database.

The Query

How can I determine when the page is fully loaded, or in other words, how do I ascertain when Angular is prepared to add the missing translations to the array? I am considering using an inverse $watch function that triggers when there are no elements in the array/collection for a specified duration, like 1 second. Is this feasible, or are there better approaches to tackle this issue?

I cannot provide any specific code examples as the functions utilized are basic such as $http and array.push.

javascript angularjs angular-translate

Answer 1

Answer №1

When trying to determine if the controller has finished fetching and binding data to the template, there are various solutions that can be implemented. The approach to take would depend on whether the translation id strings are obtained from an endpoint or already exist in the template. Here are a few suggestions:

This response demonstrates the use of directives within the template.
Another solution involves checking for $viewContentLoaded.
Alternatively, you could utilize $timeout without specifying a specific duration.

Answer 2

When trying to determine if the controller has finished fetching and binding data to the template, there are various solutions that can be implemented. The approach to take would depend on whether the translation id strings are obtained from an endpoint or already exist in the template. Here are a few suggestions:

This response demonstrates the use of directives within the template.
Another solution involves checking for $viewContentLoaded.
Alternatively, you could utilize $timeout without specifying a specific duration.

Answer 3

Answer №2

When making an $http call, you can utilize promise callbacks such as then(), catch(), finally() to handle the response accordingly:

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

If your translations or items are within an ng-repeat loop, you can refer to this solution for executing a function after ng-repeat finishes and triggering events using $emit along with listening using $on on either $scope or $rootScope.

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

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

The method of populating items with IDs may not be entirely clear, but that is one possible approach.

I hope that explanation proves useful!

Answer 4

When making an $http call, you can utilize promise callbacks such as then(), catch(), finally() to handle the response accordingly:

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

If your translations or items are within an ng-repeat loop, you can refer to this solution for executing a function after ng-repeat finishes and triggering events using $emit along with listening using $on on either $scope or $rootScope.

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

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

The method of populating items with IDs may not be entirely clear, but that is one possible approach.

I hope that explanation proves useful!

Answer 5

Answer №3

After browsing through a related StackOverflow question, I put together a small demo inspired by it. You can check out the demo here.

In this setup, there's no need to worry about whether the page is ready or not. We integrate our process with the useMissingTranslationHandler of the translate service. Below are snippets of code from the demo plunk attached:

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');
  }])

Answer 6

After browsing through a related StackOverflow question, I put together a small demo inspired by it. You can check out the demo here.

In this setup, there's no need to worry about whether the page is ready or not. We integrate our process with the useMissingTranslationHandler of the translate service. Below are snippets of code from the demo plunk attached:

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 oppositional $watch

Answer №1

Answer №2

Answer №3

Similar questions

Tips for saving/downloading generated QR codes in React Native

When the user clicks, I plan to switch the audio source

assigning attributes to web addresses

Utilize Bootstrap button dropdown to automatically assign a selected value to a list item

Is it possible for a PHP form to generate new values based on user input after being submitted?

Obtaining the scene's coordinates in Three.js

A recursive approach to filling empty space on a canvas using Javascript

After a loop, a TypeScript promise will be returned

Issue encountered during testing does not appear in final compilation and prevents tests from executing

The hide() and on() methods are not compatible with Internet Explorer (IE)

Difficulty with collapsing and expanding levels in Bootstrap 4 sidebar navigation

Why does JavaScript function flawlessly in FireFox, yet fails completely in other web browsers?

Leveraging Django variables in JavaScript

My collection consists of objects arranged in this manner

Struggling to prevent keyboard-triggered date changes in the MUI DatePicker API

Creating a worldwide object in JavaScript

Looking for assistance in setting a new initial state for a javascript toggle on page load

A more efficient method for changing all corresponding properties located at varying depths within a nested object

Create custom dynamic asset tags in AngularJS inspired by Mixture.io's features for seamless HTML templating

Divide the string into two equal sections with nearly identical lengths