AngularJs Typeahead 指令不起作用

Question

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

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

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 以数组的形式获取用户列表。如您所见，用户列表是使用 GetAllGeniuses 控制器获取的，并且工作正常。这是控制器代码：

(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: "new",
geniusname: ""
},
{
geniusid: "new",
geniusname: ""
},
{
geniusid: "news",
geniusname: ""
},
{
geniusid: "qazwsx",
geniusname: ""
}
]

我想使用搜索框中的天才ID（或名称）进行搜索...我已经尝试了网上发布的几乎所有想法，但无法弄清楚这一点..

任何想法都将不胜感激。

Answer 1

查看我使用您的演示制作的 Plunker。

有几点需要注意。您需要在脚本中包含 Angular Bootstrap 并将其注入到您的模块中。

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

和

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

另外，不要使用$rootScope 来传递数据。这是角度服务的完美用途。

也无需在每次使用 Angular 时都定义 ng-app。

这是我为使其正常工作而修改的其余 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);