Question

我是AngularJS的新手，并且我试图获取一个视图来绑定我在服务（工厂）中检索到的一些数据，我编写了这样的数据：

app.factory('DataStoreService', function ($rootScope, $location, $http) {
    var lastReportedEvents = null;
    //For our inital request to server, but for subsequent requests we should use the nextURL 
    //property of the previous successful response 
    var locationStoreURL = '/location/GetLastReportedEvents.json';

    return {

        lastReportedEvents: lastReportedEvents,
        getLastReportedEvents: function () {
            $http.get(locationStoreURL)
                .success(function (data, status, headers, config) {

                    if (data.success) {
                        lastReportedEvents = angular.fromJson(data).data;

                        //TO-DO, use the nextURL property on the JSON response and set locationStoreURL var in this service

                    }
                    else {
                        console.log('getLocationData ERROR!');
                    }
                })
                .error(function (data, status, headers, config) {
                    console.log('getLocationData ERROR!');
                });

        }


    };

});

当用户登录到应用程序时，我正在应用程序运行块中发出数据请求。

app.run(['$rootScope', '$location', 'DataStoreService', function ($rootScope, $location, DataStoreService) {


      $rootScope.$on('login', function (event) {
          //console.log('login event detected');
          DataStoreService.getLastReportedEvents();
      });

  }]);

在我的控制器中我有：

app.controller('LocationsController', ['$rootScope', '$scope', 'DataStoreService', function ($rootScope, $scope, DataStoreService) {

    $scope.locations = DataStoreService.lastReportedEvents;

}]);

正如您所看到的，我只是尝试将我的服务属性分配给$ http请求返回的数据到我的视图所绑定的控制器上的$ scope：

<div ng-controller="LocationsController">

  <table class="table table-hover table-condensed">
    <tr ng-repeat="location in locations">
        <td>
            <span>{{location.UnitName}}</span>
            <p>{{location.Location}}</p>
        </td>
    </tr>
  </table >
</div>

我的观点中没有任何内容。我可以通过在我的请求的成功处理程序中发出一个事件然后在事件监听器中分配给我的控制器中的$ scope来使它工作，但这似乎有点倒退。我想通过向控制器注入服务，对服务（属性等）的任何更改都会广播到使用该服务的任何控制器，或者我错了。

我必须遗漏一些基本的东西！

由于

Answer 1

谢谢Syarul

我已经尝试过你的方法，但它在我的情况下不起作用

我实际上是通过首先将lastReportedEvent初始化为空数组来找到答案。

然后我改变了这一行：

lastReportedEvents = angular.fromJson(data).data;

为：

lastReportedEvents.push.apply(lastReportedEvents, angular.fromJson(data).data);

我的控制器无法使用该数据，我的绑定视图按预期响应。

Answer 2

我不知道您是如何编写服务的，但您需要将其返回以使其显示在控制器中。

return {
    lastReportedEvents: function () {
        $http.get(locationStoreURL)
            .success(function (data, status, headers, config) {
                if (data.success) {
                    lastReportedEvents = angular.fromJson(data).data;
                    //TO-DO, use the nextURL property on the JSON response and set locationStoreURL var in this service
                    return lastReportedEvents;
                }
                else {
                    console.log('getLocationData ERROR!');
                }
            })
            .error(function (data, status, headers, config) {
                console.log('getLocationData ERROR!');
            });
    }
};

AngularJS从控制器中的服务共享数据

2 个答案: