web-dev-qa-db-fra.com

La montre AngularJS ne fonctionne pas

Une montre ne fonctionne pas . J'inclus le contenu suivant:

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

comme ça:

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

La fonction onload fait ceci:

(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
            });
        };
    }]);
})();

Tout semble aller pour le mieux, mais ... $ watch sur searchKeyword ne déclenche jamais la fonction lorsque je commence à saisir l'élément d'entrée appelé searchKeyword. 

angularjswatch
14
poashoas

La montre doit être un attribut de l'objet, pas l'objet lui-même, voir l'exemple ici https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope pour savoir comment ajouter une montre , et l’utilisation du modèle ici https://docs.angularjs.org/api/ng/directive/input . Vous pouvez essayer ceci (je ne l’ai pas testé)

data-ng-model="search.keyword"

et dans votre contrôleur: 

$scope.search = {}

...

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

Avez-vous essayé d'ajouter true, ci-dessous?

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

Si vous êtes curieux de savoir ce que la true est, voici la signature de fonction de the docs :

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

Lorsque objectEquality == true, l'inégalité de watchExpression est déterminée en fonction de la fonction angular.equals. Pour enregistrer la valeur de l'objet en vue d'une comparaison ultérieure, la fonction angular.copy est utilisée. Cela signifie donc que regarder des objets complexes aura des conséquences néfastes sur la mémoire et les performances.

Donc, apparemment, l'important est qu'il vérifie l'égalité de l'ancienne valeur et de la nouvelle valeur d'une manière différente. Je pensais que cela était nécessaire si (corrigez-moi si je me trompe) la valeur que vous surveillez est, par exemple, un tableau par opposition à une chaîne.

42
Anthony Perot

Juste pour ajouter à la liste des solutions possibles:

En utilisant des formulaires:

L'utilisation de ng-pattern supprimera l'appel à $ watch à moins que et jusqu'à ce que l'entrée soit validée par ng-pattern.

Donc, juste au cas où, si quelqu'un utilise ng-pattern, essayez $ watch après avoir supprimé ng-pattern.

Pour plus de lecture: 

Angular.js - ng-change ne se déclenche pas lorsque ng-pattern est $ invalid

1
daksh_019

Le plus simple consiste à passer à true comme dernier argument de $ watch.

Pour plus de lecture:

https://github.com/mbenford/ngTagsInput/issues/174

0
user123456789