Question

我的HTML就是这样：

<body ng-controller="MainCtrl as ctrl" class="bodyContainer">
<div ng-repeat="stuff in ctrl.stuffies">
    here
</div>

这是我的控制者：

angular.module("AuthenticationApp", ["BaseApp"])
    .controller("MainCtrl", ["$http", "$window", "BaseService", function($http, $window, BaseService) {
        var self = this;

        BaseService.fetch.stuffs(function() {
            self.stuffies = BaseService.stuffies;
            console.log(self.stuffies);
            self.cerrorMessages = BaseService.cerrorMessages;
        });
    }]);

这是我的BaseApp：

angular.module("BaseApp", [])
    .config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.xsrfCookieName = 'csrftoken';
        $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
    }])

    .config(['$locationProvider', function($locationProvider){
        $locationProvider.html5Mode(true);
    }])

    .factory("BaseService", ["$http", "$window", function($http, $window) {
        var self = this;


        /* All functions which call fetch should have a callback function
         * on the front-end which sets 
         * 1) a variable (i.e. stuffies etc.)
         * 2) and BaseService.cerrorMessages. */
        self.fetch = {
             stuff: function(callback) {
                 $http.get("/stuffs/")
                 .then(function(response) {
                     self.stuffies = response.data;
                     callback();
                 }, function(response) {
                     self.accessErrors(response.data);
                     callback();
                 });
             }
        };

问题是，即使它在self.stuffies内记录了一个项目（当这一行运行时：console.log(self.stuffies);），HTML中也不会打印here。 ctrl.stuffies内似乎没有任何内容。我尝试将console.log(self.stuffies);移到BaseService.fetch.stuffs(function()之外，然后记录undefined。如何让ctrl.stuffies成为BaseService.stuffies？

Answer 1

您正在使用像服务这样的工厂。

让您的工厂自行调用（初始化）其self.fetch功能，然后在构建控制器时，将控制器的stuffies变量设置为等于工厂的stuffies变量。

修改

如果您只想一次初始化某些数据，则可以自行调用最初要检索数据的函数。

然后，您可以在路由中使用解析来在特定路由被命中时初始化更多数据。

Answer 2

没有必要使用$ http服务的回调，因为它返回promises：

//.factory("BaseService", ["$http", "$window", function($http, $window) {
app.service("BaseService", ["$http", "$window", function($http, $window) {
    //var self = this;


    /* All functions which call fetch should have a callback function
     * on the front-end which sets 
     * 1) a variable (i.e. stuffies etc.)
     * 2) and BaseService.cerrorMessages. */
    this.fetch = {
         stuff: function() {
           //vvvv RETURN the promise
           return $http.get("/stuffs/")
             .then(function(response) {
                 //vvvv RETURN the data
                 return response.data;
                 //self.stuffies = response.data;
                 //callback();
           });//, function(response) {
             //    self.accessErrors(response.data);
             //    callback();
             //});
         }
    };
});

在服务中无需对$ http错误做任何事情。错误将在承诺中自动转发。

然后在控制器中从promise中提取数据（或错误）：

/* REPLACE
BaseService.fetch.stuffs(function() {
    self.stuffies = BaseService.stuffies;
    console.log(self.stuffies);
    self.cerrorMessages = BaseService.cerrorMessages;
});
*/


BaseService.fetch.stuffs
  .then(function(data) {
    self.stuffies = data;
    console.log(self.stuffies);
}).catch(function(errorResponse) {
    self.cerrorMessages = errorResponse.data;
});

有关详细信息，请参阅

我将您的服务更改为工厂~~并将其设为：~~ 并以这种方式使用它：
BaseService.fetch.stuffs() 
  .then(function(data) {
    self.stuffs = data;
    console.log(self.stuffs);  
}).catch(function(errorResponse) { 
    self.cerrorMessages = errorResponse.data; 
});
这样很好（使用工厂，因为工厂内部还有其他功能，我不想将它们全部更改为服务）？

抱歉，工厂
self.fetch = { 
    stuffs: function() { 
        return $http.get("/stuffs/")
          .then(function(response) {
              return response.data; 
        });
    }
};

服务或工厂都可以使用。使用服务，可以通过向自动返回的this上下文添加属性来添加函数（除非使用return语句覆盖）。对于工厂，return声明是强制性的。函数将添加到返回的对象中。选择是一种风格问题。它们都以相同的方式使用。

将变量从工厂分配给控件不起作用

2 个答案: