AngularJS中的实时搜索过滤器

Question

我写了下面的代码，但是当我在搜索栏中写一些东西时，什么也没发生。

＆＃13;

＆＃13;

app = angular.module('appAvis', []);
app.factory('impFactory', function ($http, $q) {
    var factory = {
        impExps: false,
        getImp: function () {
            var deferred = $q.defer();
            $http.get('.conf/data.php')
                .success(function (data, status) {
                    factory.impExps = data;
                    deferred.resolve(factory.impExps);
                }).error(function (data, status) {
                    deferred.reject('impossible de récupérer les articles');
                });
            return deferred.promise;
        }
    };
    return factory;
});

app.controller('appCtrl', function ($scope, impFactory) {

    //assigne json data
    $scope.impExps = impFactory.getImp().then(function (impExps) {
        $scope.loading = true;
        $scope.impExps = impExps;
        $scope.loading = false;
    }, function (msg) {
        alert(msg);
    });
});

//exportation        
app.factory('expFactory', function ($http, $q) {
    var factory = {
        expImps: false,
        getExp: function () {
            var def = $q.defer();
            $http.get('.conf/expo.php')
                .success(function (data, status) {
                    factory.expImps = data;
                    def.resolve(factory.expImps);
                }).error(function (data, status) {
                    def.reject('impossible de récupérer les articles');
                });
            return def.promise;
        }
    };
    return factory;
});

app.controller('expCtrl', function ($scope, expFactory) {
    $scope.impExps = expFactory.getExp().then(function (impExps) {
        $scope.loading = true;
        $scope.impExps = impExps;
        $scope.loading = false;
    }, function (msg) {
        alert(msg);
    });
});

app.filter('searchFor', function () {
    return function (arr, searchString) {
        if (!searchString) {
            return arr;
        }
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function (impo) {
            if (impo.titre.toLowerCase().indexOf(searchString) !== -1) {
                result.push(impo);
            }
        });
        return result;

    };
});

app.controller('rootCtrl', function ($scope, searchFor) {
    console.log(searchFor);
});
 

＆＃13;

<div id="main" ng-controller="rootCtrl">
<div class="container">
    <div id="navigation-bar" class="clearfix">
        <form id="search">
            <div id="label"><label for="search-terms" id="search-label">search</label></div>
            <div id="input"><input type="text" name="search-terms" id="search-terms"
            ng-model="searchString" placeholder="Enter search terms..."></div>
        </form>
        <nav>
            <ul ng-model="tab" ng-init="tab = 'import'">
                <li ng-class="{active:tab==='import'}"><a id="im" href ng-click="tab = 'import'">avis aux importateur</a></li>
                <li ng-class="{active:tab==='export'}"><a id="ex" href ng-click="tab = 'export'">avis aux exportateur</a></li>
            </ul>
        </nav>
    </div>
    <div class="cont">
        <div ng-show="tab === 'import'">
            <div ng-controller="appCtrl">
                <div ng-show="loading">Chargement....</div>
                <div ng-repeat="impo in impExps | searchFor:searchString" class="box">
                    <ul class="forn">
                        <li class="profile"><a class="title" href="{{impo.lien}}">
                            <i class="icon-link"></i><strong>{{impo.num+" "+impo.titre+" "+impo.date}}</strong></a>
                        </li>
                        <li class="profile" ng-repeat="file in impo.fichier">
                            <a href="{{file.lien}}"><i class="icon-link"></i>{{file.text1}}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="cont">
        <div ng-show="tab === 'export'">
            <div ng-controller="expCtrl">
                <div ng-show="loading">Chargement....</div>
                <div ng-repeat="impo in impExps | searchFor:searchString" class="box">
                    <ul class="forn">
                        <li class="profile"><a class="title" href="{{impo.lien}}">
                            <i class="icon-link"></i><strong>{{impo.num+" "+impo.titre+" "+impo.date}}</strong></a>
                        </li>
                        <li class="profile" ng-repeat="fich in impo.fichier">
                            <a href="{{fich.lien}}"><i class="icon-link"></i>{{fich.text1}}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>    

＆＃13;

＆＃13;

＆＃13;

我认为问题的原因是$scopes，作为解决方案，我写了一点scope communication with $emit但没有结果。