javascript - 在angularJS中绑定(bind)服务数据

Question

我有一个用于在 2 个 Controller 之间共享数据并检索数据列表的服务:

myApp.service('DataService', function($http) {
    this.data = [];
    this.loadData = function() {
        $http.get('/api/data').success(function(data) {
            this.data= data;
        })
    };

});

在我的 Controller 中调用:

myApp.controller('appController', function($scope, DataService) {
    $scope.DataService= DataService;
    DataService.loadData();
});

并显示在这里:

<div ng-controller="appController">
    <li ng-repeat='item in DataService.data'>
        <a href="#item/{{item.ID}}"> View Item</a>
    </li>
</div>

运行时，它不显示任何内容。 我用一些警告框运行它，可以看到数据列表中填充了我想要显示的数据，但没有显示其他信息。

Answer 1

您没有正确使用您的服务。现在，Angular 很难监视服务属性的变化。与其将数据存储为自身的属性，不如简单地将其返回给调用者。尝试:

myApp.service('dataService', function($http) {
    this.loadData = function() {
        return $http.get('/api/data').then(function(data) { return data; });
    }
}

然后在 Controller 中调用它，例如:

myApp.controller('appController', function($scope, dataService) {
    $scope.data = dataService.loadData();
});

并绑定(bind)到像这样的 View 中:

<div ng-controller="appController">
    <li ng-repeat="item in data track by $id">
        <a href="#item/{{ item.ID }}">View Item</a>
    </li>
</div>