Tips for Waiting for Binding in an Angular 1.5 Component (No Need for $scope.$watch)

Question

Tips for Waiting for Binding in an Angular 1.5 Component (No Need for $scope.$watch)

Currently, I am in the process of developing an Angular 1.5 directive and have encountered a frustrating issue related to manipulating data that is not yet available.

Below is a snippet of my code:

app.component('formSelector', {
  bindings: {
    forms: '='
  },
  controller: function(FormSvc) {

    var ctrl = this
    this.favorites = []

    FormSvc.GetFavorites()
    .then(function(results) {
    ctrl.favorites = results
    for (var i = 0; i < ctrl.favorites.length; i++) {
      for (var j = 0; j < ctrl.forms.length; j++) {
          if (ctrl.favorites[i].id == ctrl.newForms[j].id) ctrl.forms[j].favorite = true
      }
     }
    })
}
...

Essentially, I am fetching favorites via AJAX and then comparing them to the list of forms that are bound within the directive.

The issue arises from the fact that the promise is resolved before the binding is actually populated... resulting in 'ctrl.forms' still being undefined when the loop is executed!

Is there a way to overcome this hurdle without resorting to using $scope.$watch, which contradicts the 1.5 component approach?

javascript angularjs components

Answer 1

Answer №1

Encountering a comparable problem, I found a solution to prevent calling the component until the necessary value is prepared:

<form-selector ng-if="asyncValue" forms="asyncValue" ></form-selector>

Answer 2

Encountering a comparable problem, I found a solution to prevent calling the component until the necessary value is prepared:

<form-selector ng-if="asyncValue" forms="asyncValue" ></form-selector>

Answer 3

Answer №2

Utilizing the latest lifecycle hooks, particularly $onChanges, allows you to identify the initial change of a binding by utilizing the isFirstChange method. Discover more about this here.

Check out this example:

<div ng-app="app" ng-controller="MyCtrl as $ctrl">
  <my-component binding="$ctrl.binding"></my-component>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script>
<script>
  angular
    .module('app', [])
    .controller('MyCtrl', function($timeout) {
      $timeout(() => {
        this.binding = 'initial value';
      }, 750);

      $timeout(() => {
        this.binding = 'new value';
      }, 1500);
    })
    .component('myComponent', {
      bindings: {
        binding: '<'
      },
      controller: function() {
        // Implement es6 destructuring for precise extraction
        this.$onChanges = function({binding}) {
          if (angular.isDefined(binding)) {
            console.log({
              currentValue: binding.currentValue, 
              isFirstChange: binding.isFirstChange()
            });
          }
        }
      }
    });
</script>

Answer 4

Utilizing the latest lifecycle hooks, particularly $onChanges, allows you to identify the initial change of a binding by utilizing the isFirstChange method. Discover more about this here.

Check out this example:

<div ng-app="app" ng-controller="MyCtrl as $ctrl">
  <my-component binding="$ctrl.binding"></my-component>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script>
<script>
  angular
    .module('app', [])
    .controller('MyCtrl', function($timeout) {
      $timeout(() => {
        this.binding = 'initial value';
      }, 750);

      $timeout(() => {
        this.binding = 'new value';
      }, 1500);
    })
    .component('myComponent', {
      bindings: {
        binding: '<'
      },
      controller: function() {
        // Implement es6 destructuring for precise extraction
        this.$onChanges = function({binding}) {
          if (angular.isDefined(binding)) {
            console.log({
              currentValue: binding.currentValue, 
              isFirstChange: binding.isFirstChange()
            });
          }
        }
      }
    });
</script>

Answer 5

Answer №3

The individual who initiated the post stated :

the commitment is being honored even before the connection is set... so that when I execute the loop, ctrl.forms is still undefined

Starting from AngularJS version 1.5.3, we now have lifecycle hooks and to address the question posed by the original poster, you simply need to shift the code that relies on the bindings being fulfilled inside $onInit():

$onInit() - Executed on each controller after all controllers on an element have been constructed and had their bindings initialized (and prior to the pre & post linking functions for the directives on this element). This is a suitable location to include initialization code for your controller.

Therefore, in the given example:

app.component('formSelector', {
  bindings: {
    forms: '='
  },
  controller: function(FormSvc) {
    var ctrl = this;
    this.favorites = [];

    this.$onInit = function() {
      // At this point, bindings have been resolved.
      FormSvc
          .GetFavorites()
          .then(function(results) {
            ctrl.favorites = results;
            for (var i = 0; i < ctrl.favorites.length; i++) {
              for (var j = 0; j < ctrl.forms.length; j++) {
                if (ctrl.favorites[i].id == ctrl.newForms[j].id) {
                  ctrl.forms[j].favorite = true;
                }
              }
            }
          });
    }
}

Hence, while there exists a $onChanges(changesObj), $onInit() is specifically relevant to the initial inquiry about when we can be certain that bindings have been completed.

Answer 6

The individual who initiated the post stated :

the commitment is being honored even before the connection is set... so that when I execute the loop, ctrl.forms is still undefined

Starting from AngularJS version 1.5.3, we now have lifecycle hooks and to address the question posed by the original poster, you simply need to shift the code that relies on the bindings being fulfilled inside $onInit():

$onInit() - Executed on each controller after all controllers on an element have been constructed and had their bindings initialized (and prior to the pre & post linking functions for the directives on this element). This is a suitable location to include initialization code for your controller.

Therefore, in the given example:

app.component('formSelector', {
  bindings: {
    forms: '='
  },
  controller: function(FormSvc) {
    var ctrl = this;
    this.favorites = [];

    this.$onInit = function() {
      // At this point, bindings have been resolved.
      FormSvc
          .GetFavorites()
          .then(function(results) {
            ctrl.favorites = results;
            for (var i = 0; i < ctrl.favorites.length; i++) {
              for (var j = 0; j < ctrl.forms.length; j++) {
                if (ctrl.favorites[i].id == ctrl.newForms[j].id) {
                  ctrl.forms[j].favorite = true;
                }
              }
            }
          });
    }
}

Hence, while there exists a $onChanges(changesObj), $onInit() is specifically relevant to the initial inquiry about when we can be certain that bindings have been completed.

Answer 7

Answer №4

I encountered a similar issue and came across a valuable article that provided the solution I needed.

Upon loading my page, an ajax call is made to the server and my component relies on the response from this ajax call for proper functioning. To address this requirement, I implemented the following:

this.$onChanges = function (newObj) {
      if (newObj.returnValFromAJAX)
        this.returnValFromAJAX = newObj.returnValFromAJAX;
    };

Following this implementation, my component now operates flawlessly. It should be noted that Angular 1.5.6 was used for this reference.

Answer 8

I encountered a similar issue and came across a valuable article that provided the solution I needed.

Upon loading my page, an ajax call is made to the server and my component relies on the response from this ajax call for proper functioning. To address this requirement, I implemented the following:

this.$onChanges = function (newObj) {
      if (newObj.returnValFromAJAX)
        this.returnValFromAJAX = newObj.returnValFromAJAX;
    };

Following this implementation, my component now operates flawlessly. It should be noted that Angular 1.5.6 was used for this reference.

Tips for Waiting for Binding in an Angular 1.5 Component (No Need for $scope.$watch)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular JS appears to be failing to properly establish values in the Dropdownlist

Unable to locate a React component module that has been published

Identifying the moment when attention shifts away from an element

Implementing Google Ads Code in NextJS for Automated Units

Once the recursive function executes (utilizing requestAnimationFrame), socket.emit can finally be triggered

Fatal syntax error encountered when attempting to define a JavaScript object

When attempting to delete, I encounter an error stating that $index is undefined

Enhance PHP search functionality by showcasing hidden auto-complete suggestions in real-time

The Challenge of Iterating Through an Array of Objects in Angular Components using TypeScript

Posting several pictures with Protractor

Are there any additional features available in NetSuite that allow for viewing multiple pages within a PDF document?

Having difficulty requesting an API in Next.js that relies on a backend cookie

Store my JSON data in a separate file and then reference it in my controller

Next.js is able to generate a unique URL that strictly handles code execution without any visual elements

Refreshing Ajax in a different tab causes the selectize element to become unbound from the editing form in Rails 5

hiding the UI filter with AngularJS: a step-by-step guide

Error message: The function pokemon.map does not exist

Steps for deactivating a button until the form has been submitted

Generating an associative array on the fly

I'm having trouble getting my object to display using ng-repeat in Angular. Can anyone help me understand what I'm missing?