#angularjs #watch
#angularjs #Смотреть
Вопрос:
Новичок в Angular и пытаюсь запустить примеры из книги. Пример касается метода $ watch. Следующий код работает нормально:
<html ng-app>
<head>
<title>StartUp Calculator</title>
</head>
<body>
<form ng-controller='StartUpController'>
Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate" />
Recommendation: {{funding.needed}}
</form>
<script src="Scripts/angular.js"></script>
<script>
function StartUpController($scope) {
$scope.funding = { startingEstimate: 0 };
$scope.computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
}
</script>
</body>
</html>
Но, когда я добавляю метод $ watch и упрощаю шаблон, вся страница завершается ошибкой со следующим:
-
Внутри элемента ввода вообще не отображается начальная оценка
-
Переменная {{funding.needed}} отображается на странице в виде буквенной строки
Код, который завершается с ошибкой, является:
<html ng-app>
<head>
<title>StartUp Calculator</title>
</head>
<body>
<form ng-controller='StartUpController'>
Starting: <input ng-model="funding.startingEstimate" />
Recommendation: {{funding.needed}}
</form>
<script src="Scripts/angular.js"></script>
<script>
function StartUpController($scope) {
$scope.funding = { startingEstimate: 0 };
$scope.$watch('funding.startingEstimate', computeNeeded);
$scope.computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
}
</script>
</body>
</html>
Понятия не имею, что является причиной этого…нужна помощь, пожалуйста 🙂
Комментарии:
1. ошибка консоли js? можете ли вы предоставить jsfiddle? кстати, тест
$scope.$watch($scope.funding.startingEstimate, computeNeeded);
Ответ №1:
Просто ошибка в коде. Вы пропускаете $scope
перед computeNeeded. Кроме того, поместите $scope.computeNeeded
выше $watch
, потому что указатель не объявляется до тех пор, пока после $watch
текущего момента.
$scope.computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate', $scope.computeNeeded);
В качестве альтернативы, я бы сделал это таким образом, что позволило бы вам размещать needed
везде, где вы хотите.
function needed() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
}
$scope.computeNeeded = needed;
$scope.$watch('funding.startingEstimate', needed);
Комментарии:
1. Спасибо @Pete 🙂 Это работает нормально. Я также отследил ответ (ниже), и он практически такой же. Проголосовал бы за это, но у меня недостаточно репутации 🙁
Ответ №2:
Спасибо @Pete!
Я также смог отследить это 🙂
Это почти то же самое, что предоставил @Pete, только я объединил объявление var с фактической функцией.
Код, который работает, объявляет computeNeeded как var, а $ watch следует за ним в коде.
(Примечание: у меня был $ watch как до, так и после в оригинале, и оба не работали)
Рабочий код:
<html ng-app>
<head>
<title>StartUp Calculator</title>
</head>
<body>
<form ng-controller='StartUpController'>
Starting: <input ng-model="funding.startingEstimate" />
Recommendation: {{funding.needed}}
</form>
<script src="Scripts/angular.js"></script>
<script>
function StartUpController($scope) {
$scope.funding = { startingEstimate: 0 };
var computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate', computeNeeded);
}
</script>
</body>
</html>