web-dev-qa-db-ja.com

AngularJS時計が機能しない

時計が機能していません。次のコンテンツを含める：

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

すべて順調に進んでいるようですが、searchKeywordという入力要素の入力を開始すると、searchKeywordの$ watchが関数を起動しません。

angularjswatch
14
poashoas

ウォッチは、オブジェクトそのものではなく、オブジェクトの属性である必要があります。こちらの例を参照してください 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', ...
34
Carl

以下にtrueを追加しようとしましたか？

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

trueが何であるか知りたい場合、 ドキュメント からの関数シグネチャは次のとおりです。

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

ObjectEquality == trueの場合、watchExpressionの不等式は、angle.equals関数に従って決定されます。後で比較するためにオブジェクトの値を保存するには、angle.copy関数を使用します。したがって、これは、複雑なオブジェクトを監視すると、メモリとパフォーマンスに悪影響を及ぼすことを意味します。

明らかに重要なことは、古い値と新しい値の等価性を異なる方法でチェックすることです。あなたが見ている値が文字列ではなく配列である場合（私が間違っている場合は私を修正してください）、これが必要であることがわかりました。

42
Anthony Perot

可能な解決策のリストに追加するだけです：

フォームの使用中：

Ng-patternを使用すると、ng-patternによって入力が検証されない限り、$ watchの呼び出しが抑制されます。

したがって、念のため、誰かがng-patternを使用している場合は、ng-patternを削除してから$ watchを試してください。

さらに読むには：

Angular.js-ng-patternが$ invalidのときにng-changeが起動しない

1
daksh_019

最も簡単な方法は、$ watchの最後の引数としてtrueを渡すことです。

さらに読むには：

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

0
Libu Mathew