Блог

Главная - Вопросы по программированию - AngularJS $ watch приводит к разрыву моей страницы

AngularJS $ watch приводит к разрыву моей страницы

#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>