使用$ firebaseArray而不是火力地堡REST API [英] Using $firebaseArray instead of Firebase Rest API

问题描述

我有从火力地堡数据源过滤搜索结果的火力地堡缺乏支持阵列存储，所以我用firebaseArray作为替代结果的问题。然而，因为它需要通过多个控制器访问我必须把它变成一个工厂服务：

Hi I am having problems filtering search results from a Firebase datasource as a result of Firebase's lack of support for array storage so I am using firebaseArray as an alternative. However as it needs to be accessed via multiple controllers I have to turn it into a factory service:

servicesModule.factory("dataArray", ["$firebaseArray",
  function($firebaseArray) {
    var ref = new Firebase("https://datasource.firebaseio.com/Articles");
     return $firebaseArray(ref);
  }
]);

然后我想创建一个搜索功能来过滤输入表单查询的结果：

I then want to create a search function to filter the results of an input form query:

//Get Posts
 servicesModule.factory('globalFilter', function() {
    return {
      searchText: ''
    };
  });

搜索输入：

<form>
          <div class="input-field">
            <input id="search" type="search" required ng-model="globalFilter.searchText">
            <label for="search"><i class="material-icons medium">search</i></label>
          </div>
    </form>

这里有一个例子控制器访问过滤器和阵列工厂：

   controllersModule.controller('BlogCtrl', ["$scope",  "globalFilter",    function($scope, globalFilter, dataArray) {


     $scope.myArticles = dataArray;


   }]);

控制器的NG-重复指令内的过滤器：

<div class="col s12 m6"  id="articleItems" ng-repeat="article in myarticles">
     <div class="card small">

       <div class="card-image waves-effect waves-block waves-light">
         <img class="activator" src="images/sample-1.jpg">
       </div>
       <div class="card-content">
         <span class="card-title activator grey-text text-darken-4">{{article.Title}}<i class="material-icons right">more_vert</i></span>
         <p><a href="#">Read More</a></p>
         <p>By: {{article.Author}} &nbsp; Published on: {{article.Published | date:'mediumDate'}}</p>
       </div>
       <div class="card-reveal">
         <span class="card-title grey-text text-darken-4">{{article.Title}}<i class="material-icons right">close</i></span>
         <div>{{article.Intro}}</div>
         <p ng-bind-html="article.Body">{{article.Body}}</p>
       </div>
   </div>
</div>

通过 .STATE

该控制器还通过渲染 .STATE ：`

The controller is also rendered via .state:`

  .state('Blog', {

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

我没有得到任何错误或结果。控制台是空白的，文章不渲染。这是我用firebaseArray前的工作。什么是错我的工厂？

I am getting no errors or results. The console is blank and the articles do not render. This was working before I used firebaseArray. What is wrong with my factory?

推荐答案

如果你使用 controllerAs ，你需要在你的控制器变量绑定到这个。

If you're using controllerAs, you need to bind your controller variables to this.

controllersModule.controller('BlogCtrl', ["globalFilter", function(globalFilter, dataArray) {
    this.myArticles = dataArray;
}]);

您还需要参考您的控制器为 BLG 在您的视图。最后， myarticles 应 myArticles 。

You also need to refer to your controller as blg in your view. Lastly, myarticles should be myArticles.

<div class="col s12 m6"  id="articleItems" ng-repeat="article in blg.myArticles">

这篇关于使用$ firebaseArray而不是火力地堡REST API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！