Firebase API 的动态过滤器不工作

Question

我正在使用 angular-firebase boilerplate 节点并创建博客。我希望全局搜索输入根据您所在的网站部分动态过滤项目。搜索过滤器位于 index.html 页面内：

<input type='text' ng-model='searchFilter' placeholder='Search...'>

因此，例如，要创建一个 "Blog" 页面并使其显示来自全局搜索过滤器的结果，我使用 stateProvider 拉取 blog.html 模板并生成一个控制器本页：

  .state('Blog', {
    url: '/blog',
    controller: 'BlogCtrl as blg',
    templateUrl: 'blog.html',
    title: 'Blog'
  })

在 blog.html 中，我有一个带有以下指令的 ng-repeat 指令：

  <div ng-repeat='post in blg.myPosts | filter:searchFilter'>
    <pre>{{ myPosts| json }}</pre>
  </div>

我创建了一个 services.js，其中包含将我的虚拟数据作为跨多个控制器的工厂拉取的说明 returning a firebase 数组：

servicesModule.factory('dataService', function($firebaseArray) {
  return $firebaseArray(new Firebase('https://glowing-torch-8451.firebaseio.com/Posts/'));
});

然后对于博客控制器，我连接我的 dataService 工厂以显示来自 Api:

的结果

controllersModule.controller('BlogCtrl', function($firebaseArray, dataService) {
  blg.title = 'The Blog';
  blg.myPosts = dataService;
})

然后使用 gulp 和 browserify:

构建整个过程

gulp.task('browserify', function() {

  return buildScript('main.js');

});

由于此样板文件的构建方式，我无法运行在客户端使用简单的 angular 过滤器来显示每个页面中的结果（尤其是当 firebase 不 return 结果作为一个数组但作为一个对象）并且整个事情失败并出现 ReferenceError: blg is not defined 错误。

我创建了一个 plunker 作为示例，但很难将代码部分分开，因此它更像是一个示例来说明我在做什么，而不是原型。

我是否过于复杂或以错误的方式使用了搜索过滤器？

谢谢

Answer 1

使用 controllerAs 语法时，您需要将变量绑定到控制器中的 this。您似乎遗漏了一行代码，分配了 blg.

controllersModule.controller('BlogCtrl', function($firebaseArray, dataService) {
  var blg = this;
  blg.title = 'The Blog';
  blg.myPosts = dataService;
})

此外，在您的 ng-repeat 中，您指的是 myPosts。这需要是对 post 的引用，因为这就是您对 ng-repeat.

中每个元素的称呼

<pre>{{ post | json }}</pre>

Firebase API 的动态过滤器不工作

Dynamic filter with Firebase API not working

angularjs

api

firebase

filtering

browserify