使用 $firebaseArray 而不是 Firebase Rest API

Question

您好，由于 Firebase 缺乏对数组存储的支持，我在从 Firebase 数据源过滤搜索结果时遇到问题，因此我使用 firebaseArray 作为替代方案。但是，由于它需要通过多个控制器访问，我必须将其变成工厂服务：

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

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

//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-repeat 指令内的过滤器：

<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:`渲染的

  .state('Blog', {

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

我没有收到任何错误或结果。控制台为空白，文章未呈现。这在我使用 firebaseArray 之前有效。我的工厂出了什么问题？

Answer 1

如果您使用的是controllerAs，则需要将您的控制器变量绑定到this。

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

您还需要在您的视图中将您的控制器称为blg。最后，myarticles 应该是 myArticles。

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