AngularJs Typeahead指令不工作

我有一个简单的要求，即显示一个用户列表，并在顶部显示一个搜索按钮，按名称搜索用户，类似于简化的LinkedIn连接页面

我的web应用程序是在node.js上开发的，但这一页是在angular.js上开发的，对于这个搜索按钮，我决定使用typeahead指令。这是jade文件的外观：

html(ng-app='geniuses')
  head
    title List All Geniuses!
    link(href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css', rel='stylesheet')
    script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js')
    script(src="https://cdn.firebase.com/js/client/2.2.4/firebase.js")
    script(src="https://cdn.firebase.com/libs/angularfire/1.1.2/angularfire.min.js")
    script(src='js/listAllgeniuses.js')
  body
    div.container
      div.page-header
       h2 All Geniuses!
        div(ng-app='geniuses',ng-controller='SearchAGenius')
         input.form-control(placeholder='Genius',name='search-genius',ng-model="selected",typeahead="user for user in usersArr | filter:{'geniusid':$viewValue} | limitTo:8")
       div(ng-app='geniuses',ng-controller='GetAllGeniuses')
         ul
           li(ng-repeat='user in users') {{ user.geniusid }}

用户列表将作为数组从firebase中获取。如您所见，用户列表是使用GetAllGenius控制器获取的，并且工作正常。。以下是控制器代码：

(function (angular) {
var app = angular.module('geniuses', ["firebase"]);

app.controller('GetAllGeniuses',  ["$scope", "$rootScope","$firebaseArray",
    function($scope, $rootScope, $firebaseArray) {
      var users = $firebaseArray(new Firebase("****));
      $rootScope.usersArr = users;
      $scope.users = users;
}
])

app.controller('SearchAGenius',  ["$scope", "$rootScope",
    function($scope, $rootScope) {
      $scope.selected = '';
      $scope.usersArr = $rootScope.usersArr;
}
])

}(angular));

这是数据的外观（虚拟）：

我想使用搜索框中的geniusid（或名称）进行搜索。。。我尝试了网上发布的几乎所有想法，但都没能找到答案

任何想法都将不胜感激。

请查看我使用您的演示制作的此文件

有几件事需要注意。您将希望在脚本中包含并将其注入到模块中

script(src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js')

及

另外，不要使用

$rootScope

传递数据。这是一个完美的角度服务使用

每次使用angular时，也无需定义

ng应用程序

下面是我修改的plunker代码的其余部分，以使其正常工作

html(ng-app='geniuses')
  head
    title List All Geniuses!
    link(href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css', rel='stylesheet')
    script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js')
    script(src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js')
    script(src="https://cdn.firebase.com/js/client/2.2.4/firebase.js")
    script(src="https://cdn.firebase.com/libs/angularfire/1.1.2/angularfire.min.js")
    script(src="./app.js")

  body
    div.container
      div.page-header
       h2 All Geniuses!
        div(ng-controller='SearchAGenius')
         input.form-control(placeholder='Genius',name='search-genius',ng-model="selected",typeahead="user as user.geniusname for user in usersArr | filter:{'geniusid':$viewValue} | limitTo:8")
       div(ng-controller='GetAllGeniuses')
         ul
           li(ng-repeat='user in users') {{ user.geniusid }}

还有JS

(function(angular) {
  var app = angular.module('geniuses', ["firebase", "ui.bootstrap"]);

  app.controller('GetAllGeniuses', ["$scope", 'GeniusFactory',
    function($scope, GeniusFactory) {

      $scope.users = GeniusFactory.users();
    }
  ]);

  app.controller('SearchAGenius', ["$scope", 'GeniusFactory',
    function($scope, GeniusFactory) {
      $scope.selected = '';
      $scope.usersArr = GeniusFactory.users();
    }
  ]);

  app.factory('GeniusFactory', ["$firebaseArray", function($firebaseArray) {
    //Create a users object
    var _users;

    return {
      users: users
    }

    function users() {
      //This will cache your users for as long as the application is running.
      if (!_users) {
        //_users = $firebaseArray(new Firebase("****"));
        _users = [{
          geniusid: "new",
          geniusname: "Harry"
        }, {
          "geniusid": "new",
          "geniusname": "Jean"
        }, {
          "geniusid": "news",
          "geniusname": "Mike"
        }, {
          "geniusid": "qazwsx",
          "geniusname": "Lynn"
        }];
      }
      console.log(_users);
      return _users;
    }
  }]);
})(angular);

不过我有一个问题。。工厂中的if条件检查_user是否为null。那么，只要应用程序在运行，这将只加载一次？如果添加了新用户怎么办？是否有任何方法可以强制刷新此列表？您需要在服务中编写一个方法，允许您将新用户推入阵列或从firebase刷新阵列。我知道这不是一个完美的解决方案，但它是有效的。。将数组注入$global作用域，然后在其上编写一个观察程序，怎么样？然后，一旦修改了数组，就编写一个apply函数来更新内容。。如果这是可行的，那么你能给我提供一些代码样本给这种类型的观察者吗。。
html(ng-app='geniuses')
  head
    title List All Geniuses!
    link(href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css', rel='stylesheet')
    script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js')
    script(src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js')
    script(src="https://cdn.firebase.com/js/client/2.2.4/firebase.js")
    script(src="https://cdn.firebase.com/libs/angularfire/1.1.2/angularfire.min.js")
    script(src="./app.js")

  body
    div.container
      div.page-header
       h2 All Geniuses!
        div(ng-controller='SearchAGenius')
         input.form-control(placeholder='Genius',name='search-genius',ng-model="selected",typeahead="user as user.geniusname for user in usersArr | filter:{'geniusid':$viewValue} | limitTo:8")
       div(ng-controller='GetAllGeniuses')
         ul
           li(ng-repeat='user in users') {{ user.geniusid }}

(function(angular) {
  var app = angular.module('geniuses', ["firebase", "ui.bootstrap"]);

  app.controller('GetAllGeniuses', ["$scope", 'GeniusFactory',
    function($scope, GeniusFactory) {

      $scope.users = GeniusFactory.users();
    }
  ]);

  app.controller('SearchAGenius', ["$scope", 'GeniusFactory',
    function($scope, GeniusFactory) {
      $scope.selected = '';
      $scope.usersArr = GeniusFactory.users();
    }
  ]);

  app.factory('GeniusFactory', ["$firebaseArray", function($firebaseArray) {
    //Create a users object
    var _users;

    return {
      users: users
    }

    function users() {
      //This will cache your users for as long as the application is running.
      if (!_users) {
        //_users = $firebaseArray(new Firebase("****"));
        _users = [{
          geniusid: "new",
          geniusname: "Harry"
        }, {
          "geniusid": "new",
          "geniusname": "Jean"
        }, {
          "geniusid": "news",
          "geniusname": "Mike"
        }, {
          "geniusid": "qazwsx",
          "geniusname": "Lynn"
        }];
      }
      console.log(_users);
      return _users;
    }
  }]);
})(angular);