in Angular Controller controllerAs Nehmen Umfang Änderung

Question

ich einen Controller haben, der wie folgt aussieht:

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); 

}; 

So ein Intervall nach 2000 ms beginnt (im Timeout) und danach alle 500 ms ausgeführt wird. Es aktualisiert das Ansichtsmodell bei jeder Iteration mit einem neuen Wert. Die Variable in der HTML-Ansicht scheint nicht zu aktualisieren. Wie lege ich das Update an?

Ich habe versucht, vm.$apply() hinzufügen und injizieren $ Bereich und dann $scope.$apply() verwenden, aber keiner scheint zu arbeiten.

Die html verwendet einfach die Variable in einem ngStyle wie so (man beachte die controllerAs Wert-Test):

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

Der anfängliche Bindung Wert von '0px' funktioniert, aber die Updates nicht.

Answer 1

diesen

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); 

}; 

Versuche und die HTML-

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

Answer 2

This piece of code works properly update every half of second and add new height: 

    <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('updat3e'); 
     }, 500); 
    }, 2000); 
}