AngularJs打字机指令不起作用

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 }}

用户列表将作为一个数组从火基中获取。如您所见，用户列表是使用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

看看我用你的演示制作的这个柱塞。

有几件事要注意。您将希望在脚本中包含角靴带，并将其注入模块。

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来传递数据。这是角质服务的完美用途。

在每次使用角时，也不需要定义ng-app。

下面是我修改好的柱塞代码的其余部分。

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);