Я пишу простой контроллер, который делает несколько расчетов. Это отражение реального проекта с более подробной информацией. Проблема в том, что результат, когда он помещен в 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]
}]);
Первый result
переменной не обновляется, так mainController
функция mainController
оценивается только один раз - это первый раз, когда угловой интерпретирует 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}}
будет обновляться автоматически, потому что угловые будут настраивать наблюдателей для них. На самом деле синтаксис выражения в html - это просто синтаксический сахар - под капотом угловые просто запускают одни и те же функции $watch
для каждого выражения, которое оно находит в html.
Подробнее см. Документацию на $ 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>
Вам понадобятся часы для пересчета значения результата при изменении номеров. В противном случае значение 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>