Firebase API 的动态过滤器不工作
Dynamic filter with Firebase API not working
我正在使用 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 作为示例,但很难将代码部分分开,因此它更像是一个示例来说明我在做什么,而不是原型。
我是否过于复杂或以错误的方式使用了搜索过滤器?
谢谢
使用 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>
我正在使用 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 作为示例,但很难将代码部分分开,因此它更像是一个示例来说明我在做什么,而不是原型。
我是否过于复杂或以错误的方式使用了搜索过滤器?
谢谢
使用 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>