简单的 $scope.$watch 没有被调用？答案

【问题标题】：Simple $scope.$watch not called?简单的 $scope.$watch 没有被调用？
【发布时间】：2014-08-22 11:06:10
【问题描述】：

我有一个简单的表格应用程序，它从数据库中获取 JSON 数据。它通过参数将数据传递给我的应用控制器，然后过滤数据。这很好用。但是，它是大量数据（十万个对象）。我有用于尝试过滤数据的搜索框，当搜索手表应该被调用时（当有人在搜索框中键入内容时），它不会。我错过了什么吗？

js:

var app = angular.module('SortingTables', ['ui.bootstrap']);
//Dependencies which are services, providers or factories must map to string types, which are then passed into the instance function

app.filter('startFrom', function () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    };
});

app.controller('Ctrl', function ($scope, filterFilter, dataTable) {
    $scope.currentPage = 1;
    $scope.itemsPerPage = 25;
    $scope.totalItems = 0;
    $scope.predicate = '';
    $scope.searchBuffer = {
        $: ''
    };
    $scope.filtered;
    //This function has sort of been abstracted...
    //The purpose of this function is to delay the update so the user gets a chance to finish typing before the filter is applied.
    //Newer versions of angularjs have the ng-model-options: debounce=100 but we can't use that since we have IE 8 on dev boxes


    $scope.$watch('searchBuffer', function (term) {
        console.log('The watch on searchBuffer was called');
        $scope.filtered = filterFilter(dataTable, term);
        $scope.totalItems = $scope.filtered.length;
    });

    $scope.pageChanged = function () {
        $scope.currentRow = $scope.currentPage * $scope.itemsPerPage - $scope.itemsPerPage;
    };
});

html

<div ng-app="Components" ng-controller="Ctrl">
    <hr/>
    <table class="table table-striped">
        <tr>
            <th><a href="" ng-click="predicate = '\'Technical Owner\''; reverse=!reverse">Technical Owner</a>
                <br />
                <input type="search" ng-model="searchBuffer['Technical Owner']">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Branch'; reverse=!reverse">Branch</a>
                <br />
                <input type="search" style="width: 40px" ng-model="searchBuffer.Branch">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Branch'; reverse=!reverse">Sub Pillar</a>
                <br />
                <input type="search" ng-model="searchBuffer['Sub Pillar']">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Path'; reverse=false">Path</a>
                <br />
                <input type="search" ng-model="searchBuffer.Path">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Name'; reverse=!reverse">Name</a>
                <br />
                <input type="search" ng-model="searchBuffer.Name">
                </a>
            </th>
            <th><a href="" ng-click="predicate = 'Description'; reverse=!reverse">Description</a>
                <br />
                <input type="search" ng-model="searchBuffer.Description">
                </a>
            </th>
        </tr>
        <tr ng-repeat="ComponetOwner in filtered | startFrom:currentPage | orderBy:predicate:reverse | limitTo:itemsPerPage">
            <td>{{ComponetOwner["Technical Owner"]}}</td>
            <td>{{ComponetOwner.Branch}}</td>
            <td>{{ComponetOwner["Sub Pillar"]}}</td>
            <td>{{ComponetOwner.Path}}</td>
            <td>{{ComponetOwner.Name}}</td>
            <td>{{ComponetOwner.Description}}</td>
        </tr>
    </table>
    <pagination items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
</div>

当我在搜索框中输入内容时，$watch 不会被调用。怎么回事？

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angularjs-scope

【解决方案1】：

searchBuffer 是一个对象。 $watch 的第三个可选参数需要设置为 'true' 以观察对象/数组（即用于深度观察）。

阅读： $watch an object

【讨论】：

现在我很想知道当他观看超过 100,000 行时会发生什么
我想像 ng-grid 这样的角网格在每一行都有手表，但是当你超过 2000 行时它们开始退化。
谢谢。你是救生员:)

【解决方案2】：

您可以使用$watchCollection 来查看对象中的所有对象。

没有为你的$watch函数设置第三个可选参数true那么深。

这是一个很好的博客：http://www.bennadel.com/blog/2566-scope-watch-vs-watchcollection-in-angularjs.htm

【讨论】：