Question

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

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

例如，要创建“博客”页面并使其显示全局搜索过滤器的结果，我使用stateProvider来提取blog.html模板并为此页面生成控制器：< / p>

  .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，其中包含将我的虚拟数据作为工厂提取到多个控制器并返回firebase数组的说明：

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

然后对于Blog控制器，我连接我的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');

});

由于构建此样板文件的方式，我无法在客户端运行简单的角度过滤器以在每个页面中显示结果（特别是当firebase不将结果作为数组而是作为对象返回时）和整件事因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的动态过滤器无效

1 个答案: