數據綁定不起作用的2種方法
[英]2 ways data binding does not work
問題描述
我正在編寫一個簡單的控制器，它很少進行計算。 這反映了具有更多高級信息的真實項目。 問題是，當將結果作為表達式放置在html上時，每次更改都會重新計算結果，但是，當我在$ scope中作為變量計算時，結果不會更新。 請參閱標記中的評論。
知道我在這里缺少什么嗎？
標記
<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]
}]);
3 個解決方案
解決方案1
2 2015-07-06 08:50:22
第一個變量result不會更新，因為您的mainController函數僅被評估一次-這是angular第一次解釋html並首先發現表達式ng-controller="mainController" 。
為了使result自動更新，您必須在控制器中設置監視監聽器，如下所示：
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語法，因為它會使控制器controller腫。 或者，您可以從html調用函數：
{{ calculateResult() }}
在您的控制器中，然后將定義如下函數：
angular.module('myApp',[])
.controller('mainController', ['$scope', function($scope) {
// ...
$scope.calculateResult = function () {
return $scope.numbers.a*$scope.numbers.b;
};
}]);
旁注 ：如果您擔心性能，而您的calculateResult()函數確實很慢，則可能要堅持使用第一個版本。
解決方案2
1 2015-07-06 08:47:41
僅在實例化控制器時（通常在顯示相應視圖時）才執行控制器中的計算。 您必須將計算封裝在函數中（無需$ 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>
解決方案3
0 2015-07-06 08:48:01
當數字更改時，您需要一個手表來重新計算結果的值。 否則， 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>
數據綁定在XML視圖中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.