Question

我的工厂中有一个属性，并且有一个sync（）方法来更新它，但是当从控制器访问时，值永远不会改变。

我的路由器:(初步解决事件）

'use strict';

myApp

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider

  .state('app', {
    abstract: true,
    views: {
      'header': {
        controller: 'HeaderCtrl',
        templateUrl: 'views/header/_header.html'
      },
      'footer': {
        templateUrl: 'views/footer/_footer.html'
      }
    }
  })

  .state('app.events', {
    url: '^/',
    views: {
      'content@': {
        controller: 'EventsCtrl',
        templateUrl: 'views/events/_events.html',
        resolve: {
          postPromise: ['EventsServ', function(EventsServ) {
            return EventsServ.getAll();
          }]
        }
      }
    }
  })

  .state('app.about', {
    url: '^/sobre',
    views: {
      'content@': {
        templateUrl: 'views/about/_about.html'
      }
    }
  })

  .state('app.contact', {
    url: '^/contato',
    views: {
      'content@': {
        controller: 'ContactCtrl',
        templateUrl: 'views/contact/_contact.html'
      }
    }
  });

}]);

我的控制器:(现在与Facebook同步并更新活动）

'use strict';

myApp

.controller('EventsCtrl', ['$scope', 'EventsServ', '$filter', '$window', 'Facebook', 'postPromise', '$log', '$timeout', function($scope, EventsServ, $filter, $window, Facebook, postPromise, $log, $timeout) {

  $scope.alerts = [];
  $scope.events = EventsServ.all(); // <<<< Never update, keep the same value obtained in router.
  $scope.periods = [{
    label: 'HOJE',
    labelColor: 'success',
    startTime: $filter('clearTime')(new Date()),
    endTime: $filter('clearTime')(new Date()),
    events: []
  }, {
    label: 'PRÓXIMOS DIAS',
    labelColor: 'primary',
    startTime: $filter('clearTime')($filter('addDay')(new Date(), 1)),
    endTime: $filter('clearTime')($filter('addDay')(new Date(), 8)),
    events: []
  }, {
    label: 'PRÓXIMAS SEMANAS',
    labelColor: 'warning',
    startTime: $filter('clearTime')($filter('addDay')(new Date(), 9)),
    events: []
  }];

  if (postPromise.status >= 200 && postPromise.status < 300) {
    angular.forEach($scope.events, (function(event) {
      var eventDate = $filter('clearTime')(event.start_time);
      angular.forEach($scope.periods, (function(period) {
        if (eventDate >= period.startTime && (eventDate <= period.endTime || !period.endTime)) {
          period.events.push(event);
        }
      }));
    }));
    Facebook.getLoginStatus(function(response) {
      if(response.status === 'connected') {
        EventsServ.sync();
        $log.info($scope.events);
      } else {
        $log.info('notLoggedIn');
      }
    });
  } else {
    $scope.alerts.push({
      type: 'danger',
      msg: 'Ooops! Não foi possível buscar os eventos.'
    });
  }

  $scope.openEvent = function(event) {
    $window.open('http://facebook.com/events/' + event.id, '_blank');
  };

  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };

}])

.filter('addDay', function() {
  return function(date, days) {
    return new Date(date.setDate(date.getDate() + days));
  };
})

.filter('clearTime', function() {
  return function(date) {
    var d = new Date(date);
    d.setHours(0,0,0,0);
    return d;
  };
});

我通过$ scope.events构建我的视图循环。

我的工厂：

'use strict';

myApp

.factory('EventsServ', ['$http', '$q', 'Facebook', 'PagesServ', '$log', function($http, $q, Facebook, PagesServ, $log) {

  var factory = {
    events: []
  };

  factory.all = function() {
    return factory.events;
  };

  factory.getAll = function() {
    return $http.get('/events.json')
      .success(function(response) {
        angular.copy(response, factory.events);
      })
      .error(function(response) {
        $log.error('Failed to get events.');
      });
  };

  factory.sync = function() {
    PagesServ.getAll().then(function(response) {
      var pages = PagesServ.pages;
      var events = [];
      var pagesPromises = [];
      var eventsPromises = [];

      angular.forEach(pages, function(page, key) {
        pagesPromises.push(Facebook.api(page.facebook_id, function(response) {
          page.facebook_id = response.id;
          page.name = response.name;
          page.image = 'image.jpg';
          delete page.events;
          delete page.created_at;
          delete page.updated_at;
        }));

        eventsPromises.push(Facebook.api(page.facebook_id + '/events', function(response) {
          var pageEvents = response.data;
          angular.forEach(pageEvents, function(event, key) {
            event.page = page;
          });
          events = events.concat(pageEvents);
        }));
      });

      $q.all(pagesPromises).then(function() {
        $log.info(pages);
      }, function(reason) {
        $log.error('Failed to syncs pages: ' + reason);
      });

      $q.all(eventsPromises).then(function() {
        factory.events = [];
        angular.forEach(events, function(event, key) {
          var eventSynced = {
            facebook_id: event.id,
            image: '',
            name: event.name,
            description: event.description,
            start_time: event.start_time,
            end_time: event.end_time,
            going: 397,
            address: '...',
            page: event.page
          }
          factory.events.push(eventSynced);
        });
        $log.info(factory.events); // <<<<< Here the new value is correct!
      }, function(reason) {
        $log.error('Failed to syncs events: ' + reason);
      });
    });
  };

  return factory;

}]);

打印到控制台时，工厂内属性的新值是正确的，但在控制器中，值永远不会改变，总是[]。

Answer 1

当我希望数据在控制器和工厂，工厂和多个控制器之间保持同步时，我将我想要在控制器中访问的数据项设置为工厂中的对象或数组：

    // in your controller change this
    $scope.events = EventsServ.all();
    // to use the object
    $scope.events = EventsServ.events;

在迭代事件的同步函数中，将每个事件推入临时数组，然后使用angular.copy对控制器提供对数组的更新。

    // at the line right before you log the events in the factory use
    angular.copy(tempArray, factory.events);
    $log.info(factory.events);

更多信息：http://www.justinobney.com/keeping-angular-service-list-data-in-sync-among-multiple-controllers/

工厂属性未在控制器中更新

1 个答案: