数据绑定无法工作的两种方式

2 ways data binding does not work

本文关键字：两种 方式 工作 数据绑定      更新时间：2023-09-26

我正在写一个简单的控制器，它做很少的计算。这是一个真实项目的反映与更先进的信息。问题是，当作为表达式放置在html上时，每次更改都会重新计算结果，但是，当我在$范围内作为变量进行计算时，它不会更新。请参阅标记中的注释。

你知道我错过了什么吗?

标记 

<body ng-app="myApp"> 
<div ng-controller="mainController">
  <h3> Numbers </h3> 
  <label> a </label>
  <input type="number" ng-model="numbers.a"/>
  <label> b </label> 
  <input type="number" ng-model="numbers.b">
<br>
<br>
  <span> Result : {{result}} {{numbers.a*numbers.b}} </span> // the first one does not update, but the second does. 
  <h3> Nums </h3> 
    <label> a </label>
  <input type="number" ng-model="a1">
  <label> b</label> 
  <input type="number" ng-model="b1">
<br>  
  Result2:  {{result2}} {{a1+b1}}
<ul> 
  <li ng-repeat=" i in cool"> {{i}} </li>
  </ul>
  </div>
</body>
javascript: 

angular.module('myApp',[])
.controller('mainController', ['$scope', function($scope) {
  $scope.numbers = {a:11, b:10}; 
  $scope.a1 = 5; 
  $scope.b1 = 7; 
  $scope.result = $scope.numbers.a*$scope.numbers.b; 
  $scope.result2 = $scope.a1 +$scope.b1 ;
  $scope.cool = [$scope.result + $scope.result2, 
               $scope.result - $scope.result2]
}]);
http://codepen.io/Tallyb/pen/rVdebm

第一个变量result不更新，因为你的mainController函数只求值一次-这是angular第一次解释html并首先发现表达式ng-controller="mainController"。

为了让result自动更新，您必须在控制器中设置watch侦听器，如下所示:

angular.module('myApp',[])
.controller('mainController', ['$scope', function($scope) {
  // ...
  $scope.$watch('[numbers.a, numbers.b]', function () {
    $scope.result = $scope.numbers.a*$scope.numbers.b;
  });
}]);

像{{numbers.a*numbers.b}}这样的表达式会自动更新，因为angular会为它们设置监听器。事实上，html中的表达式语法只是语法糖——在底层，angular只是对它在html中找到的每个表达式调用相同的$watch函数。

详情请参阅$watch文档

我个人不喜欢使用上面提到的$watch语法，因为它使控制器膨胀。或者，您可以从html:

中调用函数。
{{ calculateResult() }}
在你的控制器中，你可以这样定义这个函数: 
angular.module('myApp',[])
.controller('mainController', ['$scope', function($scope) {
  // ...
  $scope.calculateResult = function () {
    return $scope.numbers.a*$scope.numbers.b;
  };
}]);

边注:如果你担心性能，你的calculateResult()函数真的很慢，你可能想坚持使用第一个版本。

控制器中的计算只在控制器实例化时执行，通常在显示相应的视图时执行。您必须将计算封装在函数中(不需要$watch):

$scope.result = function() {
  return $scope.numbers.a * $scope.numbers.b;
}
$scope.result2 = function() {
  return $scope.a1 + $scope.b1;
}
$scope.cool = function() {
  return [
    $scope.result() + $scope.result2(),
    $scope.result() - $scope.result2()
  ];
}

并在视图中引用它:

<span> Result : {{result()}} {{numbers.a*numbers.b}} </span>

: 

Result2:  {{result2()}} {{a1+b1}}

: 

<li ng-repeat=" i in cool(result, result2)"> {{i}} </li>

见:http://codepen.io/anon/pen/vORXpg

当数字改变时，您需要一个手表来重新计算result的值。否则result的值只计算一次

var app = angular.module('my-app', [], function() {})
app.controller('mainController', ['$scope',
  function($scope) {
    $scope.numbers = {
      a: 11,
      b: 10
    };
    $scope.a1 = 5;
    $scope.b1 = 7;
    //if a or b is changed recalculate result
    $scope.$watch('[numbers.a, numbers.b]', function() {
        $scope.result = $scope.numbers.a * $scope.numbers.b;
      })
      //if a1 or b1 is changed recalculate result2
    $scope.$watch('[a1, b1]', function() {
      $scope.result2 = $scope.a1 + $scope.b1;
    })
    //if result or result2 is changed recalculate cool
    $scope.$watch('[result, result2]', function() {
      $scope.cool = [$scope.result + $scope.result2,
        $scope.result - $scope.result2
      ]
    })
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="mainController">
    <h3> Numbers </h3> 
    <label>a</label>
    <input type="number" ng-model="numbers.a" />
    <label>b</label>
    <input type="number" ng-model="numbers.b" />
    <br/>
    <br/>
    <span> Result : {{result}} {{numbers.a*numbers.b}} </span> // the first one does not update, but the second does.
    <h3> Nums </h3> 
    <label>a</label>
    <input type="number" ng-model="a1" />
    <label>b</label>
    <input type="number" ng-model="b1" />
    <br/>Result2: {{result2}} {{a1+b1}}
    <ul>
      <li ng-repeat=" i in cool">{{i}}</li>
    </ul>
  </div>
</div>

相关文章：