Implement the scope change in an Angular controller by utilizing controllerAs functionality

Question

Implement the scope change in an Angular controller by utilizing controllerAs functionality

I am facing an issue with my controller setup as shown below:

angular
  .module('app.core')
  .controller('TestController', TestController);

TestController.$inject = ['$timeout', '$interval'];

function TestController($timeout, $interval) {

  var vm = this;
  vm.formHeight = '0px';

  $timeout(function() {
    var heightCheck = $interval(function() {
      var formHeightNew = document.getElementById('form').offsetHeight;
      vm.formHeight = formHeightNew + 'px';
    }, 500);
  }, 2000);

};

An interval is triggered after a delay of 2000ms (inside the timeout function) and then runs every 500ms. It updates the view model but the changes are not reflected in the HTML. How can I apply these updates?

I have attempted using vm.$apply() and injecting $scope followed by using $scope.$apply(), but unfortunately, these methods did not work.

In the HTML, I am simply binding the variable to an ngStyle attribute like this (where the controllerAs value is set to 'test'):

<div class="form-wrapper" ng-style="{'height': test.formHeight}">
</div>

The initial value bound to '0px' works fine, however, any subsequent updates do not reflect in the view.

javascript angularjs

Answer 1

Answer №1

Give this a try

angular
  .module('app.core')
  .controller('TestController', TestController);

TestController.$inject = ['$scope', '$timeout', '$interval'];

function TestController($scope, $timeout, $interval) {

  $scope.formHeight = '0px';

  $timeout(function() {
    var heightCheck = $interval(function() {
      var formHeightNew = document.getElementById('form').offsetHeight;
      $scope.formHeight = formHeightNew + 'px';
    }, 500);
  }, 2000);

};

Also, here is the corresponding HTML code

<div class="form-wrapper" ng-style="{'height': formHeight}">
</div>

Answer 2

Give this a try

angular
  .module('app.core')
  .controller('TestController', TestController);

TestController.$inject = ['$scope', '$timeout', '$interval'];

function TestController($scope, $timeout, $interval) {

  $scope.formHeight = '0px';

  $timeout(function() {
    var heightCheck = $interval(function() {
      var formHeightNew = document.getElementById('form').offsetHeight;
      $scope.formHeight = formHeightNew + 'px';
    }, 500);
  }, 2000);

};

Also, here is the corresponding HTML code

<div class="form-wrapper" ng-style="{'height': formHeight}">
</div>

Answer 3

Answer №2

This specific snippet of code is designed to efficiently update every half of a second and incorporate new height values:

    <div class="testCtrl" data-ng-controller="appController as test">
        <form action="state1_submit" id="form" method="get" accept-charset="utf-8" >
            <input type="text" name="" value="" >
            <div class="form-wrapper" ng-style="{'height': test.formHeight}">
            </div>
        </form>
    </div>

angular.module('myApp')
    .controller('appController', appController);

function appController($timeout, $interval) {
    var vm = this;
    vm.formHeight = '0px';
    $timeout(function() {
        var heightCheck = $interval(function() {
            var formHeightNew = document.getElementById('form').offsetHeight;
            vm.formHeight = formHeightNew + 'px';
            console.log(vm.formHeight);
            console.log('update');
        }, 500);
    }, 2000);
}

Answer 4

This specific snippet of code is designed to efficiently update every half of a second and incorporate new height values:

    <div class="testCtrl" data-ng-controller="appController as test">
        <form action="state1_submit" id="form" method="get" accept-charset="utf-8" >
            <input type="text" name="" value="" >
            <div class="form-wrapper" ng-style="{'height': test.formHeight}">
            </div>
        </form>
    </div>

angular.module('myApp')
    .controller('appController', appController);

function appController($timeout, $interval) {
    var vm = this;
    vm.formHeight = '0px';
    $timeout(function() {
        var heightCheck = $interval(function() {
            var formHeightNew = document.getElementById('form').offsetHeight;
            vm.formHeight = formHeightNew + 'px';
            console.log(vm.formHeight);
            console.log('update');
        }, 500);
    }, 2000);
}

Implement the scope change in an Angular controller by utilizing controllerAs functionality

Answer №1

Answer №2

Similar questions

Transmit information to Angular application upon being delivered by Express

Can the coordinates in an array be constrained within a specific radius?

What is the best way to download a vast number of files with nodejs?

Adding data from a database into an object in PHP for temporary use during the loading process can be achieved by following

Exploring Ways to Retrieve Property Names in AngularJS JSON

Update the getJSON filter to only include specific results and exclude the majority

Sustain information across two pages using Next.js

Angular's radio button is set to "checked" on a pre-configured model

Creating plugin-based applications using HTML5

Modifying object colors on hover using three.js

Is it possible to incorporate a label within a dropdown menu (<select>)?

Encoding multiple arrays in JSON using Zend PHP

How to Retrieve Variables from a Separate .json File in Python

The test that utilizes MemoryRouter to render a component with required parameters is failing, showing the error message 'role: heading not found'

Choose a Vue filter according to the variable selected

Learn how to dynamically update a user's profile picture in the navbar when clicked using Angular

A directive in Angular that leverages the same model but presents varying data

What methods are available for retrieving specific XML entries using JavaScript?

Develop a descriptive box for a radio button form using jQuery

Maintain browser tab state when refreshing using Bootstrap