AngularJs Typeahead 指令无效

Question

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

我的网络应用程序是在 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: ""
}
]

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

如有任何想法，我们将不胜感激。

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 服务的完美使用。

也无需在每次使用 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);

AngularJs Typeahead 指令无效

AngularJs Typeahead directive not working

twitter-bootstrap

angularjs

bootstrap-typeahead