Question

我对角度js非常新，但我正在查看具有类似内容的代码

<div style="margin-top: {{increaseHeight()}}>

并且increaseHeight()函数在$scope变量中使用了一个变量，用于javascript，如下所示

$scope.increaseHeight = function() {
    return $scope.value * 2;
}

令我感到惊讶的是，每次$scope.value更改时，都会调用函数increaseHeight()并更新HTML。这是怎么做到的？ angular是否保持轮询以更改其范围，然后调用其$scope变量中定义的每个函数，然后相应地更新模板？

对不起，这是一个非常明显的问题。我对此非常陌生，在线搜索并没有多大帮助。谢谢！

Answer 1

每次执行摘要循环时，都会调用您的函数。 https://www.thinkful.com/projects/understanding-the-digest-cycle-528/

这是Angular可以真正使用VueJS的计算属性的区域。

在您的具体情况下，您可以按照自己的风格执行此操作：

＆＃13;

angular.module('app', [])

.controller('TestController', function($scope){
  $scope.value = 5;
  $scope.style = {
    "margin-top": "5px"
  };
  $scope.$watch('value', function(newVal, oldVal){
    $scope.style = {
      "margin-top": (newVal * 2)+"px"
    };
  });
});

＆＃13;

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="TestController">
  <div class="box" ng-style="style"></div>
  <input type="number" ng-model="value">
</div>

＆＃13;

何时嵌入在Angularjs中调用的{{}}中的函数

1 个答案: