Question

我有一个看起来像这样的控制器：

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

};

因此，间隔在2000ms（超时）之后开始，然后每500ms运行一次。它会在每次迭代时使用新值更新视图模型。 html视图中的变量似乎没有更新。如何应用更新？

我尝试添加vm.$apply()并注入$ scope然后使用$scope.$apply()，但似乎都无效。

html只是像ngStyle一样使用变量（注意控制器的值是测试）：

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

'0px'的初始绑定值有效，但更新不起作用。

Answer 1

试试这个

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

};

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

使用controllerAs在Angular控制器中应用范围更改

2 个答案: