AngularJS - returning dynamic functions

Question

AngularJS - returning dynamic functions

index.html

<div ng-repeat="object in objects" ng-style="getStyle(object.id)"></div>

controller.js

[...]

$scope.startWidth = 100;

$scope.getObject = [...]

$scope.getStyle = function(id) {
   var widthVal = $scope.startWidth;
   $scope.startWidth += $scope.getObject(id).value;
   return { width : widthVal }
}

[...]

Encountering an issue with an infinite $digest loop in this code snippet. The reason is understood - the return value should not be dynamic. Is there a way to prevent this loop without sacrificing functionality? The objective is to display objects with varying width, where the width of an object is dependent on the value of the preceding object.

javascript angularjs infinite-loop

Answer 1

Answer №1

The issue arises from the fact that the directive ng-style adds a $watchExpression to every child scope.

A $watchExpression needs to be idempotent, meaning it should yield the same result during multiple evaluations.
If a $watchExpression remains unclean, it triggers another $digest cycle.

UPDATE

After reading GRaAL's insightful response, I devised an even more efficient solution:

Check out this live demonstration: http://plnkr.co/edit/oPrTiwTOyCR3khs2iVga?p=preview

controller:

$scope.$watchCollection('objects', function calculateWidths() {
  var tempWidth = 0;
  for( var i = 0; i < $scope.objects.length; i++) {
    tempWidth += $scope.objects[i].value;
    $scope.objects[i].width = tempWidth + 'px';
  }
});

markup:

<div ng-repeat="object in objects" ng-style="{width: object.width}">

previous solution

Take a look at this example: http://plnkr.co/edit/CqxOmV5lpZSLKxqT4yqo?p=preview

Answer 2

The issue arises from the fact that the directive ng-style adds a $watchExpression to every child scope.

A $watchExpression needs to be idempotent, meaning it should yield the same result during multiple evaluations.
If a $watchExpression remains unclean, it triggers another $digest cycle.

UPDATE

After reading GRaAL's insightful response, I devised an even more efficient solution:

Check out this live demonstration: http://plnkr.co/edit/oPrTiwTOyCR3khs2iVga?p=preview

controller:

$scope.$watchCollection('objects', function calculateWidths() {
  var tempWidth = 0;
  for( var i = 0; i < $scope.objects.length; i++) {
    tempWidth += $scope.objects[i].value;
    $scope.objects[i].width = tempWidth + 'px';
  }
});

markup:

<div ng-repeat="object in objects" ng-style="{width: object.width}">

previous solution

Take a look at this example: http://plnkr.co/edit/CqxOmV5lpZSLKxqT4yqo?p=preview

Answer 3

Answer №2

My stance aligns with Ilan's problem elucidation and proposed solution - it proves effective as long as the objects array remains constant. However, if there is a possibility of new objects being added or removed during runtime, it becomes essential to recompute the widths whenever the collection undergoes a change. This can be achieved by utilizing the $watchCollection method of the scope or by recalculating the widths during each digest cycle. Here's a snippet that demonstrates this approach:

  var widths = [];
  $scope.$watch(function calculateWidths() {
    var tempWidth = 0;
    widths = [];
    angular.forEach($scope.objects, function(obj) {
      tempWidth += obj.value;
      widths.push(tempWidth);
    });
  });

  $scope.getStyle = function(idx){
    return {width: widths[idx] + 'px'}
  }

Check out the plunker here

Answer 4

My stance aligns with Ilan's problem elucidation and proposed solution - it proves effective as long as the objects array remains constant. However, if there is a possibility of new objects being added or removed during runtime, it becomes essential to recompute the widths whenever the collection undergoes a change. This can be achieved by utilizing the $watchCollection method of the scope or by recalculating the widths during each digest cycle. Here's a snippet that demonstrates this approach:

  var widths = [];
  $scope.$watch(function calculateWidths() {
    var tempWidth = 0;
    widths = [];
    angular.forEach($scope.objects, function(obj) {
      tempWidth += obj.value;
      widths.push(tempWidth);
    });
  });

  $scope.getStyle = function(idx){
    return {width: widths[idx] + 'px'}
  }

Check out the plunker here

AngularJS - returning dynamic functions

Answer №1

UPDATE

previous solution

Answer №2

Similar questions

Obtaining the offspring of a component utilizing an attribute guidance

What is the best way to select and link a specific section of a string using Javascript?

Using Selenium and Java to retrieve population data from en.wikipedia.org for countries

What is the best way to separate a string using a comma as a delimiter and transform it into a string that resembles an array with individual string elements

Unlocking the potential of the Bootstrap search dropdown

Is it considered a best practice in React to modify styles of elements using the className state?

What are some best practices for implementing a checkbox within an editableCellTemplate?

Generate real-time dynamic line charts using data pulled directly from a MySQL database

Adjust the position of an image to move it closer to the top using CSS

issues with jquery functionality on user control page

Discovering the process of retrieving information from Firebase using getServerSideProps in NextJs

How can you prevent an element from overflowing when employing window.pageYOffset and using a switch case to alter the background color at specified pixel thresholds?

Converting JSON-style data into a string with the power of node mysql

What happens to CSS specificity when JavaScript is used to change CSS styles?

Managing uncaught exceptions in node.js

Enhance your bookmarking experience with Vue mixins that allow you to easily customize the color

What could be causing a substring that is supposed to match to return "undefined" in JavaScript?

issue with for loop in jquery ajax not processing complete response data

Retrieve data from an SQL database and populate an HTML dropdown menu in a web page using PHP

Achieving successful implementation of angular tags input