Часы AngularJS не работают

Часы не работают. I ng - включить следующий контент:

<form class="search">
    <div class="searchbar">
        <input type="search" value="" data-ng-model="searchKeyword" placeholder="zoeken">
        <button type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
</form>

вот так:

<div ng-include src="filterPath" onload="initiateSearch()"></div>

Функция onload делает следующее:

(function(){
    var appController = angular.module('ListerAppController', []);

    appController.controller('ListerCtrl', ['$scope', '$rootScope', '$http', '$filter', '$timeout', '$sharedFactories', 'History', '$location',
        function($scope, $rootScope, $http, $filter, $timeout, $sharedFactories, History, $location) {
            $scope.initiateSearch = function () {
            // This is what you will bind the filter to
                $scope.filterText = '';

                // Instantiate these variables outside the watch
                var tempFilterText = '',
                    filterTextTimeout;

                $scope.$watch('searchKeyword', function (val) {
                    if (filterTextTimeout) $timeout.cancel(filterTextTimeout);

                    tempFilterText = val;

                    filterTextTimeout = $timeout(function() {
                        $scope.filterText = tempFilterText;
                        $scope.pageCount = function() {
                            return Math.ceil( $scope.itemsfiltered.length / $scope.itemsPerPage );
                    };
                }, 350); // delay 250 ms
            });
        };
    }]);
})();

Кажется, все идет хорошо, но... $watch на searchKeyword никогда не срабатывает, когда я начинаю вводить вводный элемент под названием searchKeyword.

Ответы

Ответ 1

Часы должны быть атрибутом объекта, а не самого объекта, см. пример здесь https://docs.angularjs.org/api/ng/type/ $rootScope.Scope о том, как добавить часы, и использование модели здесь https://docs.angularjs.org/api/ng/directive/input. Вы можете попробовать это (я его не тестировал)

data-ng-model="search.keyword"

и в вашем контроллере:

$scope.search = {}

...

$scope.$watch('search.keyword', ...

Ответ 2

Вы пытались добавить true, как показано ниже?

$scope.$watch('searchKeyword', function (val) {
 /* your logic here */                    
}, true);

Если вам интересно, что такое true, вот подпись функции из документов:

$watch(watchExpression, listener, [objectEquality]);

Когда objectEquality == true, неравенство watchExpression определяется в соответствии с функцией angular.equals. Чтобы сохранить значение объекта для последующего сравнения, используется функция angular.copy. Это означает, что просмотр сложных объектов будет иметь неблагоприятные последствия для памяти и производительности.

Похоже, что важно то, что он проверяет равенство старого значения и нового значения по-другому. Я мог видеть, что это необходимо, если (исправьте меня, если я ошибаюсь) значение, которое вы смотрите, например, массив, в отличие от строки.

Ответ 3

Просто добавьте список возможных решений:

При использовании форм:

Использование ng-pattern подавит вызов $watch до тех пор, пока вход не будет проверен с помощью ng-pattern.

Так что на всякий случай, если кто-то использует ng-pattern, попробуйте $watch после удаления ng-pattern.

Подробнее:

Angular.js - ng-change не срабатывает, когда ng-pattern недействителен