【问题标题】:resolve firebase data using ui-route使用 ui-route 解析 firebase 数据
【发布时间】:2014-03-08 13:14:18
【问题描述】:

我是 angular/ui-route 和 firebase 的新手。

您知道是否可以使用 ui-route 解析 firebase 数据?

我尝试了以下状态:

      .state('contacts', {

        abstract: true,
        url: '/contacts',
        templateUrl: './assets/app/views/contacts/contacts.html',
        resolve: {
          contacts: ['contacts',
            function( contacts){
              return contacts.all();
            }],
          contactsFb:  WHAT TO SET ???  
        },

        controller: ['$scope', '$state', 'contacts', 'utils', 'contactsFb',
          function (  $scope,   $state,   contacts,   utils, contactsFb) {

            // Working Fine but not from firebase
            $scope.contacts = contacts;
            // Can't make it works... :-(
            $scope.contacts = contactsFb;

          }]
      })

这里是工厂:

  .factory('contactsFb', function($firebase) {
    var url='https://evet.firebaseio.com/contacts';
    return $firebase(new Firebase(url));
  })

  .factory('contacts', ['$http', function ($http, utils) {
    var path = './assets/app/models/contacts.json';
    var contacts = $http.get(path).then(function (resp) {
      return resp.data.contacts;
    });

    var factory = {};
    factory.all = function () {
      return contacts;
    };
    factory.get = function (id) {
      return contacts.then(function(){
        return utils.findById(contacts, id);
      })
    };
    return factory;
  }])

不能让它工作...... :-( 也许你能帮帮我?

非常感谢!

【问题讨论】:

    标签: angularjs firebase angular-ui-router


    【解决方案1】:

    试试这样的:

    .state('contacts', {
    
      abstract: true,
      url: '/contacts',
      templateUrl: './assets/app/views/contacts/contacts.html',
      resolve: {
        loadContacts:  function(contactsFb) {
          return contactsFb.promiseToHaveContacts();
        }  
      },
    
      controller: function ($scope, contactsFb) {
          $scope.contacts = contactsFb.contacts;
        }
    })
    
    .factory('contactsFb', function($firebase, $q) {
      return {
        contacts: null,
        promiseToHaveContacts: function() {
          var deferred = $q.defer();
    
          if (this.contacts === null) {
            this.contacts = $firebase(new Firebase('https://evet.firebaseio.com/contacts'));
            this.contacts.$on('loaded', function(loadedData) {
              deferred.resolve();
            });
          }
          else {
            deferred.resolve();
          }
    
          return deferred.promise;
        }
      };
    });
    

    【讨论】:

    • 但实际上联系人详细信息显示不再起作用。我需要使用 utils.findById 的其他方法,例如 all() 或 get(),但我无法匹配语法:-(
    • 我尝试使用 Firebase 后端调整 ui-router 示例...然后,我不知道在 promiseGetContact() 方法中设置什么,这是显示详细信息所必需的。这是一些代码:plnkr.co/edit/JLVLOAeYxdcHr84qEh5o
    • 如果您只需要工厂上的一个功能,通过它的 ID 获得合同,您可以这样做:plnkr.co/edit/egi65sJY1hzKDjQ5OG6h?p=preview
    • 这实际上不起作用... this.contacts 是一个对象 { 0={...}, $bind=function(), $add=function(), 更多... } 其中项目的 id 与位置不对应。
    猜你喜欢
    • 2016-06-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-30
    • 2019-04-30
    • 1970-01-01
    相关资源
    最近更新 更多